Badge
Highlight status, count, or label information.
Core Examples
Free and accessible Badge React components with Yumma CSS.
Base
Label
Label
Label
Close
Blocked
Blocked
Blocked
Close Pill
Blocked
Blocked
Blocked
Count
Assigned3
Assigned3
Assigned3
Count Pill
Assigned3
Assigned3
Assigned3
Dot
Active
Active
Active
Dot Pill
Online
Online
Online
Pill
High Priority
High Priority
High Priority
Icon Examples
Icon
Verified
Verified
Verified
Icon Dot
Success
Success
Success
Icon Dot Pill
Active
New
Done
Icon Pill
Saved
Saved
Saved
Icon Right
High Priority
High Priority
High Priority
Icon Right Dot
New
New
New
Icon Right Dot Pill
Public
Public
Public
Icon Right Pill
Urgent
Urgent
Urgent
Size Examples
Small
Label
Label
Label
Label
Label
Medium
Label
Label
Label
Label
Label
Large
Label
Label
Label
Label
Label
Shape Examples
Square
Label
Squircle
Label