Component
Chip
A multi-purpose pill. Tap to select, render with an emoji prefix, or display as a removable tag.
9:41
Hobbies
Topics in common
FilmMeditationPainting
Multi-select + display variants
Variants
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'outline' | 'brand' | 'selected' | 'default' | Visual treatment. |
| size | 'sm' | 'md' | 'lg' | 'md' | Pill height. |
| selected | boolean | false | Forces the selected (gradient) variant; sets aria-pressed. |
| leading | ReactNode | — | Icon or emoji rendered before the label. |
| onRemove | () => void | — | Adds a trailing × that fires this callback. |
| asButton | boolean | true | Render as <button>. Set false when chip is purely decorative. |
Do / Don't
Do
- Add emoji prefixes to topics, majors, and identity tags. It's where the personality lands.
- Use selected (gradient fill) for actively-picked interest chips.
- Group chips under a category heading for picker contexts.
Don't
- Don't use yellow for selection. That's the legacy state this replaces.
- Don't mix selected and brand chips in one row. Both are gradient-flavored and get noisy.