Badges

Badges are small, visual indicators used to provide brief supporting information at a glance about an element’s status or number count. Badge itself is not interactive. Also known as: Ribbon, tag, flag

On this page

Anatomy

Text Badge

Text Badge Variation
NameDescriptionRequired
LabelLabel should be short and descriptive, no more than two to three words.Yes
Container borderSubtle border to match background.Yes
IconA simple, small icon for large badge, and x-small icon for small badge. Icon can be unfilled or filled.Optional
BackgroundBackground color can be information, neutral, success, caution, critical.Yes
ColorIcon and label should be in same color visually.Yes

Marketing Badge

Marketing Badge
NameDescriptionRequired
IconA simple, large icon for large badge, medium icon for regular badge, and small icon for small badge. Icons can be filled or unfilled.Optional
LabelLabel should be short and descriptive, no more than two to three words.Yes
BackgroundBackground can use either regular (for high-contrast) or subtle color options. When images remain consistent across light and dark modes, consider using Marketing Badge Color = “persistent”. The badge will maintain the same color in light and dark mode maintaining contrast with the image.Yes
RadiusCorner radii changes depending on location of marketing badge.Yes

Number Badge

Number Badge Variation
NameDescriptionRequired
ValueCan be any number >= 1. For anchored number badges, values larger than 99 will display as 99+; for standalone number badges, values larger than 99 will be displayed normally.Yes
BackgroundBackground color conveys states default, hover, or pressed.Yes

Dot Badge

Dot Badge Variation
NameDescriptionRequired
DotUsed to indicate that something is actionable.Yes
Dot ColorDot-Graphic Primary, Dot-Graphic Secondary, BackgroundYes

Status Badge

Status Badge Variation
NameDescriptionRequired
DotDot is used as a secondary way to indicate status.Yes
LabelLabel is used to describe the status.Yes/Optional
Dot ColorGraphic-DotYes

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.