SplitButton
Dual-action button combining a primary action with a dropdown arrow for secondary options and contextual commands
SplitButton Component
Primary action button combined with secondary dropdown actions.
Basic Usage
Single primary action with additional menu options.
Implementation Notes
Keep setup minimal so teams can adopt the component quickly.
- • Use defaults first before introducing variants.
- • Keep labels and helper text explicit.
- • Verify accessibility behavior early.
Normal Usage
Style variants for different action priorities.
Implementation Notes
This pattern maps to everyday product screens and forms.
- • Use consistent variant and size tokens.
- • Pair with helper text for clarity.
- • Prefer predictable controlled behavior.
Advanced Usage
Add icon or disabled menu actions when needed.
Implementation Notes
Advanced mode should compose cleanly with app state and callbacks.
- • Wire callbacks for analytics and persistence.
- • Tune layout for dense, data-heavy views.
- • Document edge-case behavior in examples.
Real-Life Use Cases
Typical in publishing, deployments, and bulk operation workflows.
Implementation Notes
Show how the component fits real workflows, not isolated UI demos.
- • Model practical business scenarios.
- • Include realistic content and labels.
- • Highlight production-friendly defaults.
Related Components
View allPrimary action component with variant system, size options, loading states, icon slots, and optional shimmer effects
Grouped button layout with shared borders, orientation control, and seamless visual connection between actions
Fixed-position FAB for primary screen actions with animation, positioning options, and extended label support
Icon-only button with size variants, accessibility labels, and interaction states