@elemental-ui-alpha/badge
v0.0.2
Published
A badge is a decorative indicator used to either call attention to an item or for communicating non-actionable, supplemental information.
Downloads
4
Readme
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>