XDSResizeHandle@xds/core · Resizable
Preview coming soon
Usage
Hook-based resizable panel system. useXDSResizable() manages size state and XDSResizeHandle provides the interactive pill-grip separator. Pass resize props to existing layout components via their resizable prop.Best practices
| Guidance | Practices |
|---|---|
| Do | Use useXDSResizable() with existing XDS layout components. Pass the returned props to the resizable prop on XDSLayoutPanel or XDSSideNav. |
| Do | Provide an accessible label on each XDSResizeHandle when multiple handles exist (e.g. "Resize sidebar", "Resize terminal"). |
| Don't | Wrap panels in extra container components for resize. The hook-first architecture avoids extra DOM — use it directly on existing components. |
Import
ts
Props
| Prop | Type | Description |
|---|---|---|
resizablerequired | ResizableProps | Resize props from useXDSResizable — connects handle to panel. |
direction | 'horizontal' | 'vertical' (default: 'horizontal') | Layout direction — determines cursor and indicator orientation. |
isReversed | boolean (default: false) | Reverse drag direction. Use when the handle controls a panel on the end/right/bottom side. |
isDisabled | boolean (default: false) | Whether the handle is interactive. |
hasDivider | boolean (default: false) | Show a full-length 1px divider line through the handle. Use when adjacent panels share the same background. |
isAlwaysVisible | boolean (default: false) | Show the pill grip at rest instead of only on hover. Use when discoverability is important. |
pillPlacement | 'start' | 'end' | 'center' | 'auto' (default: 'auto') | Which side of the divider the pill sits on. auto = content side (derived from isReversed), flips when collapsed. start = left/top, end = right/bottom, center = centered on divider. |
label | string (default: 'Resize handle') | Accessible label for the separator. |
children | ReactNode | Custom handle content. Overrides the default pill + divider. |