Badge
Solid color variants
The default form of solid color badges.
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Soft color variants
The default form of soft color badges.
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Rounded badges
Use the border radius utility classes to make avatars more rounded.
Badge
Max width
Simple example with truncate.
This content is a little bit longer.
Badge with indicator
Use an indicator appearance to show indication.
Badge
Badge with remove button
Use badge with remove button.
Badge
With button
Badges can be used as part of links or buttons to provide a counter.
Positioned
Position a badge in the corner of a link, button, avatar or any other component.
Profile
Display a badge without a specific count.