'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
EffectsAlea Pro
Dock
A row of icon buttons that grow as the pointer nears, like a desktop dock: a playful app launcher or a floating toolbar.
import { Dock } from '@alea/pro';
Examples
Dock
Icon buttons grow as the pointer nears, like a desktop dock. A toolbar of named buttons; arrows and Tab work as usual.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-surface…--alea-surface-raised…--alea-text…
Space
--alea-space-2…--alea-space-3…
Radius
--alea-radius-lg…--alea-radius-md…
Shadow
--alea-shadow-pop…
Motion
--alea-motion-duration-fast…--alea-motion-ease-out…
Component
--alea-dock-s…
Props
Dock props
A row of icon buttons that grow as the pointer nears, like a desktop dock. Each item is a real button with a name.
| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | { id: string; icon: ReactNode; label: string; onPress?: (() => void) | undefined; }[] | - | |
className | string | - | |
magnification | number | 1.6 |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-dock-item.alea-dock
Accessibility
- A toolbar of real buttons, each with a name (shown as a tooltip too).
- Magnification only follows a fine pointer and is off with reduced motion.
Keyboard
| Key | Does |
|---|---|
| Tab | Moves through the buttons |
| Enter or Space | Presses one |
Do and don't
Do
- Give every button a short name: it shows as a tooltip.
- Keep it to the few actions people use most.
Don't
- Don't use it as the only navigation on touch screens, where nothing magnifies.
- Don't put more than about ten buttons.