Scale
Scale tokens for interactive elements. Defines press feedback (0.98), modal enter animation (0.95), and component enter animation start scales (0.5/0.75).
Scale Tokens
Scale values for press feedback, modal entry, and component enter animations
scale-pressedButton activeButton active / pressed state
scale-95Modal enterModal content enter animation
scale-50Enter animationAnimation start scale (Radio dot, etc.)
scale-75Enter animationAnimation start scale (Checkbox, etc.)
Why This Value?
Design rationale behind each scale value
scale-pressedButton / CardA 2% reduction is perceptible but feels natural. 0.99 is too small to notice, and 0.95 makes elements appear to bounce.
scale-50Radio dotAppears from half its size. A larger scale change creates a satisfying "pop" effect for small dots.
scale-75CheckboxAppears from 75%. Checkmarks have complex shapes, so a subtler scale change feels more natural.
scale-95Modal contentAppears from 95%. For large elements like modals, a small scale change (5%) provides sufficient visual effect. Combined with translateY for a natural entrance.
Interactive Demo
Click each box to experience the scale effect.
Component Demo
Experience scale effects in real UI components
active:scale-pressed
active:scale-pressed
active:scale-pressed
Use Cases
Common usage patterns for scale tokens
active:scale-pressedVisual feedback when clicking or tapping a button
active:scale-pressedActive state for clickable cards
active:scale-pressedPress feedback for icon buttons
| Pattern | Value | Tailwind | Description |
|---|---|---|---|
| Button Press | 0.98 | active:scale-pressed | Visual feedback when clicking or tapping a button |
| Card Press | 0.98 | active:scale-pressed | Active state for clickable cards |
| Icon Button | 0.98 | active:scale-pressed | Press feedback for icon buttons |
Best Practices
Do
- ✓Use scale-pressed on standalone buttons
- ✓Combine with duration-micro
- ✓Apply only to clickable elements
- ✓Use with the active: pseudo-class
Don't
- ✗Use scale on grouped or linked buttons
- ✗Use extreme scales below 0.95
- ✗Combine with slow durations
- ✗Scale down on hover