Displays a button or a that looks like an icon.
Loading demo: button-split-real-world
npx sdaia-ui@latest add buttonsplit
import { Button } from "@/components/ui/button"import { Button } from "@/components/ui/button"Use the `size` prop to change the size of the button close.
Loading demo: button-split-sizes
The default button close style.
Loading demo: button-split-default
Props for the Button Split component.
Prop | Type | Default | Required |
|---|---|---|---|
label | string | — | optional |
variant | 'neutral' | 'primary' | 'secondary-solid' | 'secondary-outline' | 'subtle' | 'transparent' | 'neutral' | optional |
size | 'sm' | 'md' | 'lg' | 'md' | optional |
leadingIcon | ReactNode | — | optional |
onClick | MouseEventHandler | — | optional |
onMenuClick | MouseEventHandler | — | optional |
menuItems | ButtonSplitMenuItem[] | — | optional |
open | boolean | — | optional |
onOpenChange | (open: boolean) => void | — | optional |
menuAriaLabel | string | 'Open menu' | optional |
disabled | boolean | — | optional |
dir | 'ltr' | 'rtl' | — | optional |
className | string | — | optional |
mainButtonProps | ButtonHTMLAttributes | — | optional |
menuButtonProps | ButtonHTMLAttributes | — | optional |