Components
Badge
Badge is a non-interactive component that displays status with or without a number. Use Tag if you want text instead of a number.
React
const Preview = () => { return <Badge count={15} maxCount={9} />; }; render(<Preview />)
- count
- Description
The number to display in the badge
- Type
number
- maxCount
- Description
The maximum number to display in the badge, when the count exceeds this number, the badge will display `{max}+`
- Type
number
- variant
- Description
Change the background color of the badge.
- Type
"base" | "tinted"- Default
base
| Name | Type | Default | Description |
|---|---|---|---|
| count | number | - | The number to display in the badge |
| maxCount | number | - | The maximum number to display in the badge, when the count exceeds this number, the badge will display `{max}+` |
| variant | "base" | "tinted" | base | Change the background color of the badge. |
BadgePosition
- placement
- Description
The placement of the badge
- Type
"top-right" | "top-left" | "bottom-right" | "bottom-left"- Default
top-right
- overlap
- Description
Use when badge is floating to change the position of the badge
- Type
"circle" | "rectangle"- Default
rectangle
| Name | Type | Default | Description |
|---|---|---|---|
| placement | "top-right" | "top-left" | "bottom-right" | "bottom-left" | top-right | The placement of the badge |
| overlap | "circle" | "rectangle" | rectangle | Use when badge is floating to change the position of the badge |
Examples
Variants
You can switch between variant and data-color to get different colors and styles.
React
const Variants = () => { const VariantsMap: { [key: string]: { [key: string]: string }; } = { neutralBase: { 'data-color': 'neutral', }, neutralTinted: { 'data-color': 'neutral', variant: 'tinted', }, dangerBase: { 'data-color': 'danger', }, dangerTinted: { 'data-color': 'danger', variant: 'tinted', }, infoBase: { 'data-color': 'info', }, infoTinted: { 'data-color': 'info', variant: 'tinted', }, warningBase: { 'data-color': 'warning', }, warningTinted: { 'data-color': 'warning', variant: 'tinted', }, }; return ( <> {Object.entries(VariantsMap).map(([key, value]) => ( <Badge key={key} {...value} count={15} maxCount={9} /> ))} </> ); }; render(<Variants />)
Floating
You can set the placement with placement, and choose what type of overlap it can have.
React
const Floating = () => ( <> <Badge.Position placement='top-right'> <Badge data-color='danger' count={2}></Badge> <EnvelopeClosedFillIcon title='Meldinger' style={{ fontSize: '2rem' }} /> </Badge.Position> </> ); render(<Floating />)
Not all icons have the same shape, and then you may have to change where the Badge should be placed. If you can't get the Badge to be where you want it, you can use style to override the placement.
This also works when using overlap="circle".
React
const CustomPlacement = () => ( <> <Badge.Position placement='top-right' style={ { '--dsc-badge-top': '16%', '--dsc-badge-right': '10%', } as CSSProperties } > <Badge data-color='accent'></Badge> <EnvelopeClosedFillIcon title='Meldinger' /> </Badge.Position> </> ); render(<CustomPlacement />)
Inline
To have the Badge inline, place it directly in the text or component.
React
const InTabsEn = () => ( <Tabs defaultValue='value1'> <Tabs.List> <Tabs.Tab value='value1'> Favorites <Badge count={64} maxCount={10} data-color='neutral' /> </Tabs.Tab> <Tabs.Tab value='value2'>Archive</Tabs.Tab> <Tabs.Tab value='value3'> Recent <Badge count={2} data-color='neutral' /> </Tabs.Tab> </Tabs.List> <Tabs.Panel value='value1'>content 1</Tabs.Panel> <Tabs.Panel value='value2'>content 2</Tabs.Panel> <Tabs.Panel value='value3'>content 3</Tabs.Panel> </Tabs> ); render(<InTabsEn />)
HTML
Badge renders its text with CSS in a :before pseudo-element on a span tag.
You use the class name ds-badge, in conjunction with the data attribute.
If you want it to be floating, ds-badge--position must be used on a wrapper around the element that the Badge is to be placed over.
data-placement is used on the wrapper to determine the placement. See the bottom of the page for supported placements.
You can also set data-overlap="circle" on it to get circular overlap.