--- meta: title: Split Button description: Split buttons combine a primary action button with a dropdown menu for related secondary actions. layout: component --- Split buttons are useful when you have a primary action that users will perform most often, but you also want to provide quick access to related alternative actions. They consist of a main button that triggers the default action and a dropdown button that reveals additional options. ```html:preview Save As... Save a Copy Save as Template ``` ## Examples ### Basic Split Button with Links Use the `caption` attribute to set the text for the primary button. The `href` attribute on the main component sets the primary action link. ```html:preview Edit Duplicate Archive ``` ### Form Submit with Different Values Split buttons integrate with forms and can submit different values depending on which option is selected. Use the `type`, `name`, and `value` attributes to configure form behavior. When the primary button is clicked, it submits with the `defaultValue` (which is the initial `value`). When a menu item is clicked, it updates the `value` before submitting. ```html:preview

Send Send as Draft Schedule Send
``` ### Button Types Like regular buttons, split buttons support different types for form interactions: `submit`, `button`, and `reset`. ```html:preview

Save and Exit Save and New Clear All Reset to Defaults
``` ### Menu with Icons Add icons to menu items for better visual clarity using the `prefix` slot. ```html:preview Export as PDF Export as CSV Export as JSON ``` ### Complex Menu Options Split buttons can contain complex menus with submenus, dividers, and various menu item features. ```html:preview Schedule Publish Save as Draft
Publish Settings Notify Subscribers Send Email Notification Post to Social Media
Preview Before Publishing ``` ### Action Menu with Different Severities Use colored menu items to indicate the severity or importance of different actions. ```html:preview Approve with Conditions Approve and Flag for Review
Reject Request ``` ### Custom Trigger You can provide a completely custom trigger by using the `trigger` slot. This overrides the default button group appearance. ```html:preview Accept Accept All Accept with Conditions ``` ### Real-World Example: Email Actions A practical example showing how split buttons work in a typical email application scenario. ```html:preview
Reply All Forward Archive and Mark as Read Archive and Mute Thread Inbox Spam Trash
``` ### Dropdown Placement The dropdown uses `placement="bottom-end"` by default, positioning the menu at the bottom-right of the button group. The split button wraps a `zn-dropdown` component internally. ```html:preview Option 1 Option 2 Option 3 ``` ### Form Integration Example A complete form example showing how split buttons work with form validation and submission. ```html:preview


Cancel Save and Close Save and Create New Save and Preview
``` ### Events Split buttons work with the standard menu events. Listen for the `zn-menu-select` event to handle menu item selections. ```html:preview Action 1 Action 2 Action 3
Last action: None
``` ### Programmatic Control You can programmatically control the split button and access its internal components. ```html:preview Option 1 Option 2
Show Dropdown Hide Dropdown Get Current Value Set Value to 'option1'
Status: Ready
```