Components
Loading preview...
A button that offers a primary interaction coupled with a dropdown menu offering additional actions.
@shugar
npx shadcn@latest add https://21st.dev/r/shugar/split-buttonimport { SplitButton, SplitButtonMenuItem } from "@/components/ui/split-button";
export default function MenuAlignmentDemo() {
return (
<div className="flex gap-4">
<SplitButton
buttonProps={{
onClick: () => {
alert("Clicked Saved");
}
}}
menuButtonLabel="Select save method"
menuItems={
<>
<SplitButtonMenuItem
description="Save changes"
menuItemProps={{
onClick: () => {
alert("Clicked Save");
}
}}
title="Save"
/>
<SplitButtonMenuItem
description="Save changes and create a new production deployment"
menuItemProps={{
onClick: () => {
alert("Clicked Save + Redeploy");
}
}}
title="Save + Redeploy"
/>
</>
}
menuProps={{ width: 264 }}
>
Save
</SplitButton>
<SplitButton
buttonProps={{
onClick: () => {
alert("Clicked Saved");
}
}}
menuAlignment="bottom-end"
menuButtonLabel="Select save method"
menuItems={
<>
<SplitButtonMenuItem
description="Save changes"
menuItemProps={{
onClick: () => {
alert("Clicked Save");
}
}}
title="Save"
/>
<SplitButtonMenuItem
description="Save changes and create a new production deployment"
menuItemProps={{
onClick: () => {
alert("Clicked Save + Redeploy");
}
}}
title="Save + Redeploy"
/>
</>
}
menuProps={{ width: 264 }}
>
Save
</SplitButton>
</div>
);
}