Chips
Status indicators and labels
Colors
+5.2%-2.1%Low VolumeNeutralPro
<Chip color="success">+5.2%</Chip>
<Chip color="danger">-2.1%</Chip>
<Chip color="warning">Low Volume</Chip>
<Chip color="default">Neutral</Chip>
<Chip color="accent">Pro</Chip>Variants
PrimarySecondaryTertiarySoft
<Chip variant="primary" color="accent">Primary</Chip>
<Chip variant="secondary" color="accent">Secondary</Chip>
<Chip variant="tertiary" color="accent">Tertiary</Chip>
<Chip variant="soft" color="accent">Soft</Chip>Sizes
SmallMediumLarge
<Chip size="sm">Small</Chip>
<Chip size="md">Medium</Chip>
<Chip size="lg">Large</Chip>Usage in Financial Context
Chips are commonly used to display stock price changes and status indicators.
AAPL+2.5%
MSFT-1.2%
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
color | 'default' | 'accent' | 'success' | 'warning' | 'danger' | 'default' | Chip color |
variant | 'primary' | 'secondary' | 'tertiary' | 'soft' | 'primary' | Chip style variant |
size | 'sm' | 'md' | 'lg' | 'md' | Chip size |