Badge

A small numeric or status indicator, typically shown attached to another element. Used for notification counts, status indicators, and labels.

Import

import { Badge } from '@proyecto-viviana/solid-spectrum';

Variants

Five color variants to convey different meanings.

5primary

12accent

3success

99warning

1danger

<Badge count={5} variant="primary" />
<Badge count={12} variant="accent" />
<Badge count={3} variant="success" />
<Badge count={99} variant="warning" />
<Badge count={1} variant="danger" />

Typical Usage

Badges are typically positioned relative to another element.

<div class="badge-anchor">
  <Button variant="secondary">Notifications</Button>
  <Badge count={7} variant="danger" class="badge-corner" />
</div>

Large Counts

Counts over 99 display as '99+'.

100999

<Badge count={100} variant="primary" />
<Badge count={999} variant="danger" />

Props

Prop	Type	Default	Description
`count`	number	—	Numeric count to display
`variant`	'primary' \| 'accent' \| 'success' \| 'warning' \| 'danger'	`'primary'`	Color variant
`class`	string	—	Additional CSS classes for positioning

Accessibility

Use aria-label on the parent container to describe the badge count
Combine with aria-live regions for dynamic count updates
Example: <button aria-label="Notifications, 7 unread">