| 1 | ---
|
| 2 | title: Badge
|
| 3 | isExperimentalPackage: true
|
| 4 | ---
|
| 5 |
|
| 6 | A badge is a decorative indicator used to either call attention to an item or
|
| 7 | for communicating non-actionable, supplemental information.
|
| 8 |
|
| 9 | ## Example
|
| 10 |
|
| 11 | ```jsx live
|
| 12 | <Badge tone="info">Label</Badge>
|
| 13 | ```
|
| 14 |
|
| 15 | ### Tones
|
| 16 |
|
| 17 | ```jsx live
|
| 18 | const tones = ['accent', 'caution', 'critical', 'info', 'neutral'];
|
| 19 |
|
| 20 | return (
|
| 21 | <Inline gap="small">
|
| 22 | {tones.map(tone => (
|
| 23 | <Badge key={tone} tone={tone}>
|
| 24 | {tone}
|
| 25 | </Badge>
|
| 26 | ))}
|
| 27 | </Inline>
|
| 28 | );
|
| 29 | ```
|
| 30 |
|
| 31 | ## Props
|
| 32 |
|
| 33 | ### Badge
|
| 34 |
|
| 35 | <PropsTable displayName="Badge" />
|
| 36 |
|
| 37 | ### IndicatorDot
|
| 38 |
|
| 39 | <PropsTable displayName="IndicatorDot" />
|
| 40 |
|
| 41 | [data-attribute-map]:
|
| 42 | https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
|