Badge
Compact pill-shaped labels for status, counts, and metadata. Use Badge for small semantic indicators that should stay visually lightweight.
Variants
<diwa-badge variant="neutral">Neutral</diwa-badge>
<diwa-badge variant="accent">Accent</diwa-badge>
<diwa-badge variant="success">Success</diwa-badge>
<diwa-badge variant="warning">Warning</diwa-badge>
<diwa-badge variant="danger">Danger</diwa-badge>Sizes
Use small badges in dense layouts such as tables and filters, and medium badges where the label needs more emphasis.
<diwa-badge variant="accent" size="sm">Small</diwa-badge>
<diwa-badge variant="accent" size="md">Medium</diwa-badge>Counts
Numeric badges should provide an accessible label when the number alone lacks context.
<diwa-badge variant="danger" label="3 failed items">3</diwa-badge>
<diwa-badge variant="warning" label="12 pending notifications">12</diwa-badge>
<diwa-badge variant="success" label="99 completed tasks">99</diwa-badge>