Badge

Unable to parse html

const Preview = () => {
  return <Badge count={15} maxCount={9} />;
};

render(<Preview />)

Usage

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 data-count.

CSS variables and data attributes

Sizes are controlled with data-size and colors with data-color. The component will inherit from the nearest parent with these set.

Examples

Floating

Not all icons have the same shape, and you may have to change where the badge should be placed.

If you want it to be floating, the class 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 “CSS variables and data attributes” section above for supported placements.

If you are placing the badge on a circular element, you can use data-overlap="circle" to get circular overlap.

Unable to parse html

const Floating = () => (
  <>
    <Badge.Position placement='top-right'>
      <Badge data-color='danger' count={2}></Badge>
      <EnvelopeClosedFillIcon
        title='Meldinger'
        style={{ height: '2rem', width: 'auto' }}
      />
    </Badge.Position>
  </>
);

render(<Floating />)

Custom placement

If you can't get the badge to be where you want it, you can use the variables --dsc-badge-top|right|bottom|left to override the placement.

This also works when using data-overlap="circle".

Unable to parse html

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 />)

React