Resizable
Panels people resize by dragging the line between them.
Left out of Brand expressive Resizable is for desktop tools and not phones. Visitors come from social posts on their phones, and Brand expressive avoids tools people use for hours. Use instead: Card
See it live
npm run storybookWhen to use it
- Use it when: Desktop tools where people choose how much space each panel gets.
- Not when: Phones, or layouts with one obvious shape.
Instead:
- Sidebar: Fixed app navigation.
Words
- Headlines are short and bold. Three to six words.
- Verbs that move: Join, Try, Go.
- Playful in headlines, plain in errors.
- Use: Join, Drop, Go, Love. Avoid: Synergy, Leverage, Kindly.
The labels components use, from the voice tokens:
content.action.commit: Gocontent.action.cancel: Not nowcontent.action.destroy: Removecontent.action.retry: Try againcontent.action.empty-action: Explore the drop
See Voice and tone for the whole voice.
Accessibility and keyboard
| Keyboard | What happens | Not |
|---|---|---|
| undefined | The handle can be focused and moved with arrow keys. | undefined |
Use it in code
npx open-ds add resizable
The component reads only component keys and semantic tokens, so it follows the brand and mode on <html>.
Tokens it reads
Resizable reads 7 tokens of its own, each an alias of a semantic token. Each row is one part: its own token, the semantic it aliases, and the value it ends at. Change a semantic and every component that reads it follows; override one of Resizable's tokens to change Resizable alone.
Brand expressive decides what changes when you switch theme. Here a switch changes colors only, so the marked rows differ between light and dark; everything else holds steady.
| Part | Its token and the semantic it aliases | Value |
|---|---|---|
| Handle | ||
| Fill Changes with theme | component.resizable.handle.backgroundcolor.border.defaultvar(--resizable-handle-background) | Lighttaupe.light.200:#F2DCCFDarktaupe.dark.100:#33241F |
| Focus on focus | component.resizable.handle.focusborder-width.focusvar(--resizable-handle-focus) | border-width.3:3px |
| Focus ring focus Changes with theme on focus | component.resizable.handle.focus-ring-focuscolor.border.focusvar(--resizable-handle-focus-ring-focus) | Lightpink.light.600:#D61F7ADarkpink.dark.600:#F59ACA |
| Focus ring offset focus Changes with theme on focus | component.resizable.handle.focus-ring-offset-focuscolor.surface.canvasvar(--resizable-handle-focus-ring-offset-focus) | Lighttaupe.light.50:#FFF8F3Darktaupe.dark.0:#120B09 |
| Resizable | ||
| Height | component.resizable.heightsize.iconvar(--resizable-height) | size.20:1.25rem |
| Corner | component.resizable.radiusradius.badgevar(--resizable-radius) | radius.999:9999px |
| Fill Changes with theme | component.resizable.backgroundcolor.border.defaultvar(--resizable-background) | Lighttaupe.light.200:#F2DCCFDarktaupe.dark.100:#33241F |
| From the system | ||
| Edge Changes with theme | color.border.default straight from the system, through --border | Lighttaupe.light.200 · #F2DCCFDarktaupe.dark.100 · #33241F |