Trend Chip
Direction and size of a change. Trend and tone are separate, because up is not always good.
+12%-8%0%+5 no-shows
Usage
import { TrendChip } from '@smartui/react';
import '@smartui/react/styles.css';When to use
- Next to the main number on a KPI.
When not to use
- A status that is not a change. Use Badge.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
trend | 'up' | 'down' | 'flat' | 'up' | |
tone | 'positive' | 'negative' | 'neutral' | follows trend | |
size | 'sm' | 'md' | 'md' |
Accessibility
- Direction is shown by an arrow and a sign, not only color.