Badge

Notisindikator, Statusindikator

Storybook

Badge används tillsammans med en ikon eller knapp för att påvisa att användaren har något oläst att ta del av.

<Button
  variant='tertiary'
  aria-label='Olästa meddelanden'
>
  <BadgeContainer>
    <Bell />
    <Badge />
  </BadgeContainer>
</Button>

Installation

npm

npm install @midas-ds/components

Yarn

yarn add @midas-ds/components

pnpm

pnpm add @midas-ds/components

import { Badge, BadgeContainer } from '@midas-ds/components'

Placering

För att placera Badge korrekt ovanpå till exempel en ikon eller knapp kan du använda komponenten BadgeContainer. Denna komponent skapar en relativ position för Badge att placera sig mot och säkerställer att den placeras korrekt. Använder du inte BadgeContainer kommer badge att placeras som ett normalt blockelement.

Label

Använd en label för att till exempel visa hur många meddelanden som är olästa.

<Button
  variant='tertiary'
  aria-label='12 olästa meddelanden'
>
  <BadgeContainer>
    <Bell />
    <Badge>12</Badge>
  </BadgeContainer>
</Button>