Badge
Small read-only label for a status or a category.
ScheduledArrivedFastingNo-showDraftClinicLab
Emphasis and size
neutralaccentsuccesswarningdangertealpurpleSmall
Usage
import { Badge } from '@smartui/react';
import '@smartui/react/styles.css';When to use
- The status of one thing.
When not to use
- Anything that can be pressed. Use Chip.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
tone | 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'teal' | 'purple' | 'neutral' | Meaning, not color. |
emphasis | 'soft' | 'solid' | 'soft' | |
size | 'sm' | 'md' | 'md' | |
hasDot | boolean | false |
Accessibility
- Meaning is never carried by color alone: the text is always there.