//
A dual-action button combining a primary action with a dropdown trigger.
bun add xiod-ui1import {2 ButtonSplit,3 ButtonSplitAction,4 ButtonSplitContent,5 ButtonSplitSeparator,6 ButtonSplitTrigger7} from "xiod-ui/button-split";1<ButtonSplit>2 <ButtonSplitTrigger />3 <ButtonSplitContent>4 <ButtonSplitSeparator />5 <ButtonSplitAction />6 </ButtonSplitContent>7</ButtonSplit>| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default"| "link"| "secondary"| "destructive"| "destructive-outline"| "ghost"| "outline"| null| undefined | default | |
size | "default"| "sm"| "lg"| "xs"| "xl"| "icon"| "icon-lg"| "icon-sm"| "icon-xl"| "icon-xs"| null| undefined | default | |
className | string| undefined | - | |
modal | boolean| "trap-focus"| undefined | false | Determines if the popover enters a modal state when open. - `true`: user interaction is limited to the popover: document page scroll is locked, and pointer interactions on outside elements are disabled. - `false`: user interaction with the rest of the document is allowed. - `'trap-focus'`: focus is trapped inside the popover, but document page scroll is not locked and pointer interactions outside of it remain enabled. On touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior. When `modal` is `true`, focus trapping is enabled only if `<Popover.Close>` is rendered inside `<Popover.Popup>`. It can be visually hidden with your own CSS if needed, such as Tailwind's `sr-only` utility. When `modal` is `'trap-focus'`, render `<Popover.Close>` inside `<Popover.Popup>` so touch screen readers can escape the popup. |
onOpenChange | ((open: boolean, eventDetails: PopoverRootChangeEventDetails) => void)| undefined | - | Event handler called when the popover is opened or closed. |
actionsRef | RefObject<PopoverRootActions| null>| undefined | - | A ref to imperative actions. - `unmount`: Manually unmounts the popover. Call this after any externally controlled closing animation finishes. - `close`: Closes the popover imperatively when called. |
handle | PopoverHandle<Payload>| undefined | - | A handle to associate the popover with a trigger. If specified, allows external triggers to control the popover's open state. |
open | boolean| undefined | - | Whether the popover is currently open. |
defaultOpen | boolean| undefined | false | Whether the popover is initially open. To render a controlled popover, use the `open` prop instead. |
onOpenChangeComplete | ((open: boolean) => void)| undefined | - | Event handler called after any animations complete when the popover is opened or closed. |
triggerId | string| null| undefined | - | ID of the trigger that the popover is associated with. This is useful in conjunction with the `open` prop to create a controlled popover. There's no need to specify this prop when the popover is uncontrolled (that is, when the `open` prop is not set). |
defaultTriggerId | string| null| undefined | - | ID of the trigger that the popover is associated with. This is useful in conjunction with the `defaultOpen` prop to create an initially open popover. |
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default"| "link"| "secondary"| "destructive"| "destructive-outline"| "ghost"| "outline"| null| undefined | - | |
size | "default"| "sm"| "lg"| "xs"| "xl"| "icon"| "icon-lg"| "icon-sm"| "icon-xl"| "icon-xs"| null| undefined | - | |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
initialFocus | boolean| RefObject<HTMLElement| null>| ((openType: InteractionType) => boolean| void| HTMLElement| null)| undefined | - | Determines the element to focus when the popover is opened. By default, focus moves to the first tabbable element inside the popup, except when the popover is opened by touch — then the popup itself is focused to avoid opening the virtual keyboard. - `false`: Do not move focus. - `true`: Move focus based on the default behavior (first tabbable element or popup). - `RefObject`: Move focus to the ref element. - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`). Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing. |
finalFocus | boolean| RefObject<HTMLElement| null>| ((closeType: InteractionType) => boolean| void| HTMLElement| null)| undefined | - | Determines the element to focus when the popover is closed. - `false`: Do not move focus. - `true`: Move focus based on the default behavior (trigger or previously focused element). - `RefObject`: Move focus to the ref element. - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`). Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing. |
className | string| ((state: PopoverPopupState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, PopoverPopupState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: PopoverPopupState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
side | Side| undefined | - | |
align | Align| undefined | - | |
sideOffset | number| OffsetFunction| undefined | 8 | |
alignOffset | number| OffsetFunction| undefined | - | |
tooltipStyle | boolean| undefined | - | |
anchor | Element| VirtualElement| RefObject<Element| null>| (() => Element| VirtualElement| null)| null| undefined | - | |
hideArrow | boolean| undefined | false | |
collisionAvoidance | CollisionAvoidance| undefined | - |
| Prop | Type | Default | Description |
|---|---|---|---|
className | string| (string & ((state: SeparatorState) => string| undefined))| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
orientation | Orientation| undefined | vertical | The orientation of the separator. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, SeparatorState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: SeparatorState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
nativeButton | boolean| undefined | true | Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`). |
className | string| ((state: PopoverTriggerState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, PopoverTriggerState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: PopoverTriggerState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
handle | PopoverHandle<unknown>| undefined | - | A handle to associate the trigger with a popover. |
payload | unknown | - | A payload to pass to the popover when it is opened. |
openOnHover | boolean| undefined | false | Whether the popover should also open when the trigger is hovered. |
delay | number| undefined | 300 | How long to wait before the popover may be opened on hover. Specified in milliseconds. Requires the `openOnHover` prop. |
closeDelay | number| undefined | 0 | How long to wait before closing the popover that was opened on hover. Specified in milliseconds. Requires the `openOnHover` prop. |