Button Split
Displays a button or a that looks like an icon.
Loading preview…
1
const SEND_MENU = [2
{ key: 'send-later', label: 'Send Later', icon: <ClockIcon />, onClick: () => {} },3
{ key: 'save-draft', label: 'Save Draft', icon: <DownloadIcon />, onClick: () => {} },4
{ key: 'discard', label: 'Discard', icon: <DeleteIcon />, destructive: true },5
];Installation
npx sdaia-ui@latest add buttonsplit
Usage
import { Button } from "@/components/ui/button"import { Button } from "@/components/ui/button"Examples
Size
Use the `size` prop to change the size of the button close.
Loading preview…
1
<div className="flex flex-wrap gap-4 items-center">2
<ButtonSplit variant="primary" size="lg" leadingIcon={<ArrowIcon />}>Large</ButtonSplit>3
<ButtonSplit variant="primary" size="md" leadingIcon={<ArrowIcon />}>Medium</ButtonSplit>4
<ButtonSplit variant="primary" size="sm" leadingIcon={<ArrowIcon />}>Small</ButtonSplit>5
</div>Default
The default button close style.
Loading preview…
1
<div className="flex flex-wrap gap-4 items-center">2
<ButtonSplit variant="neutral" size="lg" leadingIcon={<ArrowIcon />}>Button</ButtonSplit>3
<ButtonSplit variant="primary" size="lg" leadingIcon={<ArrowIcon />}>Button</ButtonSplit>4
<ButtonSplit variant="secondary-solid" size="lg" leadingIcon={<ArrowIcon />}>Button</ButtonSplit>5
<ButtonSplit variant="secondary-outline" size="lg" leadingIcon={<ArrowIcon />}>Button</ButtonSplit>API Reference
Button Split Props
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 |