Waiting for action
Copy this complete component into a page file. Edit and run it in the Playground.
Loading editor…
Shared separator control for draggable layout boundaries. Splitter and Three Pane Layout use this primitive so resize styling, hover expansion, and separator semantics stay consistent.
ResizeHandle is intentionally parent-controlled: the parent owns pane size state, pointer drag logic, keyboard resize increments, and layout CSS. The handle renders the accessible control surface and receives the parent callbacks plus current aria-valuemin, aria-valuemax, and aria-valuenow values.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | — | Axis of the resize separator. |
background | "subtle" | "accent" | "contrast" | "none" | "subtle" | Strip background treatment. |
height | "short" | "medium" | "tall" | "full" | "medium" | Grip marker length before hover/focus expansion. |
onPointerDown | PointerEventHandler | — | Parent resize starter. |
onKeyDown | KeyboardEventHandler | — | Parent keyboard resize handler. |
button with role="separator".