Chip and choice chips
The one rounded element: a candidate someone can pick. Choosing turns it spark-tinted; a disabled chip stays still.
Variant
Controls
Code
import { Chip } from "@/components/ui/kit/ui";
<Chip>Chip</Chip>Every state
Chip · Default
Chip · Hover
Chip · Focus
Chip · Active
Chip · Disabled
Chip · Selected
ChoiceChips
ChoiceChips · Disabled
Usage
Tokens it uses
| --paper | … |
|---|---|
| --line-control | … |
| --ink-2 | … |
| --spark | … |
| --spark-tint | … |
| --spark-deep | … |
| --font-label | … |
| --dur-instant | … |
Values are read live from the stylesheet, so they follow the site theme.
Spec
- Trigger
- Duration
- --dur-instant 100ms
- Easing
- --ease-out cubic-bezier(0.16, 1, 0.3, 1)
- Reduced motion