Materialize
English
French
Arabic
German
Light
Dark
System
Shortcuts
Calendar
Appointments
Invoice App
Manage Accounts
User App
Manage Users
Role Management
Permission
Dashboard
Analytics
Setting
Account Settings
FAQs
FAQs & Articles
Modals
Useful Popups
Notification
8 New
Congratulation Lettie 🎉
Won the monthly best seller gold badge
1h ago
CF
Charles Franklin
Accepted your connection
12hr ago
New Message ✉️
You have new message from Natalie
1h ago
Whoo! You have new order 🛒
ACME Inc. made new order $1,154
1 day ago
Application has been approved 🚀
Your ABC project application has been approved.
2 days ago
Monthly report is generated
July monthly financial report is generated
3 days ago
Send connection request
Peter sent you connection request
4 days ago
New message from Jane
Your have new message from Jane
5 days ago
CPU is running high
CPU Utilization Percent is currently at 88.63%,
5 days ago
View all notifications
John Doe
Admin
My Profile
Settings
Billing
4
FAQ
Pricing
Log Out
UI elements /
Badges
Basic Badges
Default
Primary
Secondary
Success
Danger
Warning
Info
Dark
Pills
Primary
Secondary
Success
Danger
Warning
Info
Dark
Label Badges
Label Default
Primary
Secondary
Success
Danger
Warning
Info
Dark
Label Pills
Primary
Secondary
Success
Danger
Warning
Info
Dark
Button with Badges
Default
Text
4
Text
4
Label
Text
4
Text
4
Outline
Text
4
Text
4
Badge Circle & Square Style
Basic
Default
1
2
3
4
5
6
1
2
3
4
5
6
Label
Default
1
2
3
4
5
6
1
2
3
4
5
6
Badge Circle & Square With Icon
Basic
Default
Label
Default
Dots Style
Primary
Secondary
Success
Danger
Warning
Info
Button with Badges Notification
Badge
2
Label Badge
2
Pill
2
Dot
Notifications With Icons
Small badge notifications.
6
5
4
Badges Position
Position using utility classes like
top-*
,
start-*
, etc...
4
4
4
4
Badge Overlaps for Shapes
Using
rounded-*
utilities for avatar &
.badge-dot
class for notification
9
Maximum Values
99
99+
999+
Custom label Badges
4
4
pi
4
4
4
pi
4
4