Split
SplitButton offers several related actions: the main button runs the primary one, the rest live in a menu.
The primary action is not repeated in the menu. Use SplitButton when there is a clear default choice and a few less common variants.
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { SplitButton, MenuItem } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Appearance
primary, secondary (default), outline, subtle.
Size
small, medium, large.
Usage
Do
- The main button runs the most common choice.
- The menu holds 2–5 variants of the same action.
Don't
- Don't repeat the primary action in the menu.
- Don't use it when the options are equally important. Use a regular Menu.
Props
| Prop · Type | Default | Description |
|---|---|---|
| appearance"primary" | "secondary" | "outline" | "subtle" | Default: "secondary" | Applies to both halves. |
| size"small" | "medium" | "large" | Default: "medium" | Size. |
| menuReactNode | Default: — | MenuItem / MenuItemRadio / MenuDivider. |
| menuLabelstring | Default: "More options" | aria-label for the button that opens the menu. |
| icon, onClick, disabled…ButtonProps | Default: — | Passed to the main button. |
Messages
Text built into the component: labels, aria-labels, screen reader announcements.
English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.
messages.splitButton
| Key · Type | Default (English) | messagesVi |
|---|---|---|
| menustring aria-label của nút mở menu. | Default (English)"More options" | messagesVi"Thêm tuỳ chọn" |