Button
A press answers at once by settling slightly smaller — felt more than watched. Arrows nudge forward on hover. A disabled button does neither.
Variant
Controls
▾
Code
import { Button } from "@/components/ui/kit/ui";
<Button arrow>Primary</Button>Every state
Not pressed yet
Default
Hover
Focus
Active
Disabled
Loading
Usage
Tokens it uses
| --ink | … |
|---|---|
| --paper | … |
| --spark | … |
| --spark-tint | … |
| --spark-deep | … |
| --line-2 | … |
| --surface | … |
| --muted | … |
| --font-label | … |
| --dur-instant | … |
| --ease-out | … |
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