du skal vise et varsel på et UI-element som kan kreve brukerens oppmerksomhet, som en NotificationBadge på en fane eller et ikon
du skal vise status på et element i en liste eller tabell, som en BulletBadge
Unngå Badge når
du skal vise statusmarkering eller kategorimerking — bruk Tag i stedet, siden StatusBadge og Badge med type="status" er deprecated
Retningslinjer
Sett riktig type
Gjør: Sett type="bullet" eller type="notification" explisitt.
Unngå: La type stå på standardverdien "status" — den er deprecated og gir en advarsel i konsollen.
Eksempler
NotificationBadge
<Tabs><TabList><Tabstyle={{position:'relative',minWidth:'12rem'}}>Ordre</Tab><Tabstyle={{position:'relative',minWidth:'12rem'}}>Historikk</Tab><Tabstyle={{position:'relative',minWidth:'12rem'}}> Merknader<NotificationBadgevariant="primary"style={{position:'absolute',top:0}}max={10}> 1 <VisuallyHidden>notifikasjon</VisuallyHidden></NotificationBadge></Tab></TabList><TabPanels><TabPanel><Heading2>Dine ordre</Heading2><Tag>Ingen nye ordre</Tag></TabPanel><TabPanel></TabPanel><TabPanel></TabPanel></TabPanels></Tabs>
BulletBadge
<Table><TableHead><TableRow><HeaderCell>Beskrivelse</HeaderCell><HeaderCell>Status</HeaderCell><HeaderCell>Publisering start og slutt</HeaderCell><HeaderCell>Opprettet av</HeaderCell></TableRow></TableHead><TableBody><TableRow><DataCell>Kan Entur vise reklame i mobilappen?</DataCell><DataCell><BulletBadgevariant="success">Aktiv</BulletBadge></DataCell><DataCell> 01.04.2020 - <br/> 01.01.2022</DataCell><DataCell>Entur</DataCell></TableRow><TableRow><DataCell>Kan Entur sende deg tilbud og nyheter på e-post?</DataCell><DataCell><BulletBadgevariant="neutral">Kladd</BulletBadge></DataCell><DataCell>-</DataCell><DataCell>Entur</DataCell></TableRow><TableRow><DataCell> Kan Kringom sende deg e-post medkvitteringer og billetter?</DataCell><DataCell><BulletBadgevariant="negative">Utløpt</BulletBadge></DataCell><DataCell>02.02.2020</DataCell><DataCell>Kringom</DataCell></TableRow></TableBody></Table>