Badge
Short status label with an optional icon. Six statuses: Brand, Default, Error, Warning, Success and Info.
Badge
Usage
Import the component and render it.
import { Badge } from 'src/components/Badge/Badge';
import { LifebuoyIcon } from '@phosphor-icons/react';
<Badge status="brand" iconStart={<LifebuoyIcon />}>Badge</Badge>Accessibility
Role: none (static <span>; the text is read as part of the surrounding content).
- Not focusable: a badge only labels something.
- The icon is decorative (aria-hidden). Color alone does not carry the status: the label text must say it.
Status
Set the status prop: Brand is "brand", Default is "default", Error is "error", Warning is "warning", Success is "success", Info is "info".
Badge
Badge
Badge
Badge
Badge
Badge
<Badge status="brand">Badge</Badge>
<Badge status="default">Badge</Badge>
<Badge status="error">Badge</Badge>
<Badge status="warning">Badge</Badge>
<Badge status="success">Badge</Badge>
<Badge status="info">Badge</Badge>