Testing badges v2.0.5 BOM

Badges

Default

95 Notifications

595 Clicks

595 Clicks

11 Spam

Alerts

13 Success

81 Information

23 Warning

117 Alerts

Badge in links

Default

Default 42 Messages

Primary 13 Messages

Hero 13 Messages

Neutral 13 Messages

Faint 13 Messages

Alerts

Success 71 Messages

Info 71 Messages

Warning 71 Messages

Danger 71 Messages

Badge in buttons

Normal buttons with default badge

Primary Small 13 Screen-reader text Primary Default 13 Screen-reader text Primary Large 13 Screen-reader text Primary XLarge 13 Screen-reader text

Hero Small 13 Screen-reader text Hero Default 13 Screen-reader text Hero Large 13 Screen-reader text Hero XLarge 13 Screen-reader text

Neutral Small 13 Screen-reader text Neutral Default 13 Screen-reader text Neutral Large 13 Screen-reader text Neutral XLarge 13 Screen-reader text

Faint Small 13 Screen-reader text Faint Default 13 Screen-reader text Faint Large 13 Screen-reader text Faint XLarge 13 Screen-reader text

Soft buttons with default badge

Primary Soft Small 13 Screen-reader text Primary Soft Default 13 Screen-reader text Primary Soft Large 13 Screen-reader text Primary Soft XLarge 13 Screen-reader text

Hero Soft Small 13 Screen-reader text Hero Soft Default 13 Screen-reader text Hero Soft Large 13 Screen-reader text Hero Soft XLarge 13 Screen-reader text

Neutral Soft Small 13 Screen-reader text Neutral Soft Default 13 Screen-reader text Neutral Soft Large 13 Screen-reader text Neutral Soft XLarge 13 Screen-reader text

Faint Soft Small 13 Screen-reader text Faint Soft Default 13 Screen-reader text Faint Soft Large 13 Screen-reader text Faint Soft XLarge 13 Screen-reader text

Primary buttons

Primary badge-primary 13 Screen-reader text Primary badge-hero 13 Screen-reader text Primary badge-neutral 13 Screen-reader text Primary badge-faint 13 Screen-reader text

Primary badge-success 13 Screen-reader text Primary badge-info 13 Screen-reader text Primary badge-warning 13 Screen-reader text Primary badge-danger 13 Screen-reader text

Hero buttons

Hero badge-primary 13 Screen-reader text Hero badge-hero 13 Screen-reader text Hero badge-neutral 13 Screen-reader text Hero badge-faint 13 Screen-reader text

Hero badge-success 13 Screen-reader text Hero badge-info 13 Screen-reader text Hero badge-warning 13 Screen-reader text Hero badge-danger 13 Screen-reader text

Neutral buttons

Neutral badge-primary 13 Screen-reader text Neutral badge-hero 13 Screen-reader text Neutral badge-neutral 13 Screen-reader text Neutral badge-faint 13 Screen-reader text

Neutral badge-success 13 Screen-reader text Neutral badge-info 13 Screen-reader text Neutral badge-warning 13 Screen-reader text Neutral badge-danger 13 Screen-reader text

Faint buttons

Faint badge-primary 13 Screen-reader text Faint badge-hero 13 Screen-reader text Faint badge-neutral 13 Screen-reader text Faint badge-faint 13 Screen-reader text

Faint badge-success 13 Screen-reader text Faint badge-info 13 Screen-reader text Faint badge-warning 13 Screen-reader text Faint badge-danger 13 Screen-reader text

Primary Soft buttons

Primary Soft badge-primary 13 Screen-reader text Primary Soft badge-hero 13 Screen-reader text Primary Soft badge-neutral 13 Screen-reader text Primary Soft badge-faint 13 Screen-reader text

Primary Soft badge-success 13 Screen-reader text Primary Soft badge-info 13 Screen-reader text Primary Soft badge-warning 13 Screen-reader text Primary Soft badge-danger 13 Screen-reader text

Hero Soft buttons

Hero Soft badge-primary 13 Screen-reader text Hero Soft badge-hero 13 Screen-reader text Hero Soft badge-neutral 13 Screen-reader text Hero Soft badge-faint 13 Screen-reader text

Hero Soft badge-success 13 Screen-reader text Hero Soft badge-info 13 Screen-reader text Hero Soft badge-warning 13 Screen-reader text Hero Soft badge-danger 13 Screen-reader text

Neutral Soft buttons

Neutral Soft badge-primary 13 Screen-reader text Neutral Soft badge-hero 13 Screen-reader text Neutral Soft badge-neutral 13 Screen-reader text Neutral Soft badge-faint 13 Screen-reader text

Neutral Soft badge-success 13 Screen-reader text Neutral Soft badge-info 13 Screen-reader text Neutral Soft badge-warning 13 Screen-reader text Neutral Soft badge-danger 13 Screen-reader text

Faint Soft buttons

Faint Soft badge-primary 13 Screen-reader text Faint Soft badge-hero 13 Screen-reader text Faint Soft badge-neutral 13 Screen-reader text Faint Soft badge-faint 13 Screen-reader text

Faint Soft badge-success 13 Screen-reader text Faint Soft badge-info 13 Screen-reader text Faint Soft badge-warning 13 Screen-reader text Faint Soft badge-danger 13 Screen-reader text

Badge in lists