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
| Name | Description | Required |
|---|---|---|
| Label | Label should be short and descriptive, no more than two to three words. | Yes |
| Container border | Subtle border to match background. | Yes |
| Icon | A simple, small icon for large badge, and x-small icon for small badge. Icon can be unfilled or filled. | Optional |
| Background | Background color can be information, neutral, success, caution, critical. | Yes |
| Color | Icon and label should be in same color visually. | Yes |
| Name | Description | Required |
|---|---|---|
| Icon | A simple, large icon for large badge, medium icon for regular badge, and small icon for small badge. Icons can be filled or unfilled. | Optional |
| Label | Label should be short and descriptive, no more than two to three words. | Yes |
| Background | Background 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 |
| Radius | Corner radii changes depending on location of marketing badge. | Yes |
| Name | Description | Required |
|---|---|---|
| Value | Can 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 |
| Background | Background color conveys states default, hover, or pressed. | Yes |
| Name | Description | Required |
|---|---|---|
| Dot | Used to indicate that something is actionable. | Yes |
| Dot Color | Dot-Graphic Primary, Dot-Graphic Secondary, Background | Yes |
| Name | Description | Required |
|---|---|---|
| Dot | Dot is used as a secondary way to indicate status. | Yes |
| Label | Label is used to describe the status. | Yes/Optional |
| Dot Color | Graphic-Dot | Yes |
Connect with the DLS Team on Slack or by email.
Check out additional resources.