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
Marketing Badge
Import
Marketing Badge Props
| Name | Description | Default |
|---|---|---|
| screenReaderLabel | Screenreader-only description of what the badge indicates for accessibility. string | - |
| className | Additional CSS class names for styling. string | - |
| type | The layout style of the badge. "corner" | "side" | "standalone" | standalone |
| children | Content that renders within the badge. ReactNode | - |
| size | The size of the text badge. "small" | "regular" | "large" | small |
| variant | Determines the background color of the badge. "emphasis" | "subtle" | emphasis |
| position | Determines the position of the badge. "top-start" | "bottom-start" | top-start |
| icon | Icon used in the badge. ReactNode | - |
| isOverlapping | Determines whether the badge should be displayed on top of the content boolean | false |
| persistentMode | If set, MarketingBadge will persistently stay in light or dark mode color. Use this when MarketingBadge is overlayed on an image. "light" | "dark" | - |
Other Badges
Import
Text Badge
Text Badge with Icon
Number Badge
Dot Badge
Status Badge
Badge Props
| Name | Description | Default |
|---|---|---|
| type | The type of badge. "number" | "text" | "status" | "dot" | - |
| icon | Icon used in the Text Badge. ReactNode | - |
| children | Content that renders within the Text Badge. Content that renders within the Number Badge. Children to render within the dot. ReactNode | - |
| status | Determines the color of the text badge. Determines the color of the dot badge. "caution" | "information" | "success" | "critical" | "neutral" | neutral |
| size | The size of the text badge. "small" | "large" | large |
| screenReaderLabel | Screenreader-only description of what the badge indicates for accessibility. string | - |
| className | Additional CSS class names for styling. string | - |
| anchorElement | The element which the Number Badge will anchor to. ReactNode | - |
| variant | Determines style of dot badge "primary" | "secondary" | primary |
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.