Split Button

A Split Button combines a dropdown menu for related options in one compact UI component, allowing quick execution of default tasks and easy access to additional actions.

Overview

Usage

When to Use This Component

Split Buttons are particularly effective in user interfaces where space is at a premium but multiple related actions may be required from a single point. They are ideal for forms, toolbars, or any application context where users might need quick access to primary actions along with related secondary options.

How It Works

A Split Button combines a default action button with a dropdown arrow. Users can click the main part of the button to perform the most common action, or select the dropdown arrow to reveal and select from a list of additional actions. This design allows for both speed in common tasks and flexibility in accessing more complex options, with clear icons or text to indicate the function of each choice.

Anatomy

Anatomy Options

Lead Icon: Positioned to the left of the button text, the lead icon visually represents the action or purpose of the button. It provides a quick visual cue that helps users understand the button's function at a glance.

Text: The main label of the button, describing the action that will be performed when the button is clicked. Clear and concise text improves usability by indicating the button’s purpose.

Trail Action: Positioned to the right of the button text, the trail action (such as an arrow) further emphasizes the direction or nature of the action. It visually reinforces the button’s function, often indicating forward movement or progression.

Seperator: A visual divider within the button, typically placed between the button text and the trail action, helping to distinguish the primary action from secondary options or commands.

Dos and Don'ts

Dos	Don'ts
Use official logos and colors of each social media platform for brand consistency.	Don’t alter the colors or logos, as this may reduce recognizability and violate brand guidelines.
Ensure clear labeling or tooltip if the icon alone may not be obvious to all users.	Don’t use social media login buttons as the only login option if users might not have those accounts.
Place Social Media Login Buttons in a prominent area on the login or signup page.	Don’t overcrowd the page with too many social media options; limit to popular platforms.
Provide a visual focus state for keyboard navigation to meet accessibility standards.	Don’t neglect accessibility—ensure buttons are usable with keyboard and screen readers.