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 { ButtonProps } from "@/components/ui/button-1";
import { SplitButton, SplitButtonMenuItem } from "@/components/ui/split-button";
const SIZES: ButtonProps["size"][] = ["small", "medium", "large"];
const TYPES: Extract<ButtonProps["type"], "primary" | "secondary">[] = [
"primary",
"secondary"
];
export default function DefaultDemo() {
return (
<div className="flex gap-10">
{TYPES.map((type, i) => {
return (
<div className="flex flex-col gap-4" key={type + i}>
{SIZES.map((size, j) => {
return (
<SplitButton
buttonProps={{
onClick: () => {
alert("Clicked Saved");
},
size,
type
}}
key={`${type}-${i}-${j}`}
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>
);
})}
</div>
);
}