Reusables

A button component with a primary action and additional options in a dropdown menu

Installation

npx shadcn@latest add "https://reusables.vercel.app/r/split-button"

Usage

import { SplitButton } from "@/components/ui/split-button"

const options = [
  { label: "Option 1", onClick: () => console.log("Option 1 clicked") },
  { label: "Option 2", onClick: () => console.log("Option 2 clicked") },
]
 
;<SplitButton
  options={options}
  mainAction={() => console.log("Main action clicked")}
/>

Examples

Simple

Open in

Default Split Button

Secondary Variant

Outline Variant

Small Size Variant

Split Button Action

split button Action variant with loading states, glass morphism, and animated hover effects.

npx shadcn@latest add "https://reusables.vercel.app/r/split-button-action"

Open in

Modern Split Button Variants

Size Variants

Reference

Default Split Button Props

Prop	Type	Default
`options`	`SplitButtonOption[]`	-
`mainAction`	`() => void`	-
`variant`	`default \| destructive \| outline \| secondary \| ghost \| link`	`default`
`size`	`default \| sm \| lg \| icon`	`default`
`dropdownAlign`	`start \| center \| end`	`end`
`className`	`string`	-

Action Split Button Props

Prop	Type	Default
`options`	`SplitButtonOption[]`	-
`mainAction`	`() => void`	-
`variant`	`default \| destructive \| outline \| secondary \| ghost \| link`	`default`
`size`	`default \| sm \| lg \| icon`	`default`
`dropdownAlign`	`start \| center \| end`	`end`
`icon`	`React.ReactNode`	-
`isLoading`	`boolean`	`false`
`glassMorphism`	`boolean`	`false`
`className`	`string`	-

Split Button Option Type

Prop	Type	Default
`label`	`string`	-
`onClick`	`() => void`	-
`icon`	`React.ReactNode`	-
`variant`	`default \| destructive`	-

Split Button

Modern Split Button Variants

Size Variants

On this page