# Split Action Button

> The Split Action Button is a versatile shadcn/ui-based component that combines a primary action with a secondary dropdown in a single, compact interface. The left side of the button triggers the main action directly, while the right side opens a dropdown menu containing additional, related actions. This design is particularly useful for scenarios like “Save” with options for “Save As…” or “Export” with multiple formats”, allowing users to access multiple related operations without cluttering the interface. Built with accessibility, responsive sizing, and shadcn/ui primitives, it ensures a consistent look and feel while improving usability for complex workflows.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@ruixen.ui/components/split-action-button

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/split-action-button?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt