@elemental-ui-alpha/badge v0.0.2

Badge

import { Badge } from '@elemental-ui-alpha/badge';

Usage

<Badge>Text</Badge>

Tone

Badges are used to inform users of the status of an item, or of an action that’s been taken.

<Cluster gap="small">
  <Badge tone="neutral">Draft</Badge>
  <Badge tone="action">Ready</Badge>
  <Badge tone="accent">Promo</Badge>
  <Badge tone="caution">Pending</Badge>
  <Badge tone="critical">Failed</Badge>
  <Badge tone="positive">Complete</Badge>
</Cluster>

Appearance

Badges are used to inform users of the status of an item, or of an action that’s been taken.

<Cluster gap="small">
  <Badge appearance="strong" tone="neutral">
    Draft
  </Badge>
  <Badge appearance="strong" tone="action">
    Ready
  </Badge>
  <Badge appearance="strong" tone="accent">
    Promo
  </Badge>
  <Badge appearance="strong" tone="caution">
    Pending
  </Badge>
  <Badge appearance="strong" tone="critical">
    Failed
  </Badge>
  <Badge appearance="strong" tone="positive">
    Complete
  </Badge>
</Cluster>