Components · Controls
Button
A button. Primary for the main action on a screen, quiet for everything else.
Try itChange the motion setting at the top to feel each personality.
Use it
<Button>Start lesson</Button>
<Button variant="quiet">Skip</Button>How it moves
| When | Role | What moves |
|---|---|---|
| Pointer moves over or away | feedback | Background color changes, using the role's duration and easing |
| Pressed down | feedback | Scales to the role's scale |
| Released | feedback | Scales back to 1 |
Rules:
- A button uses the feedback role and nothing else. It never enters, celebrates, or asks for attention on its own.
- The press uses the role's spring. In personalities without a spring, the spring variables fall back to the role's duration and easing, so the same CSS works everywhere.
- The label does not animate. The background animates only for hover.
- Hover applies only on devices with a pointer that can hover, so a tap on a phone never leaves a stuck hover color.
- A disabled button does not respond: no hover, no press.
Reduced motion: the feedback scale is 1, so the button does not move. The hover color still changes, over the shortest duration.
CSS variables used: --ss-motion-feedback-scale, --ss-motion-feedback-spring, --ss-motion-feedback-spring-duration, --ss-motion-feedback-duration, --ss-motion-feedback-easing.