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.
Code
<dda-split-button
text_button_type="button"
button_color="default-primary"
start_icon="sentiment_satisfied"
button_text="Button"
text_button_id="default-primary-btn"
aria_label="default primary button"
text_button_name="defaultPrimaryButton"
value="default-primary-value"
button_shape="default"
size="md"
gap="1"
disabled="false"
custom_class=""
component_mode=""
onclick="console.log('native click')"
>
<ul slot="menu">
<li><a href="#">link-1</a></li>
<li><a href="#">link-2</a></li>
<li><button type="button">Button</button></li>
</ul>
</dda-split-button>Properties
text_button_type
Specifies the button type. Common values: "button", "submit", "reset".
string
button_color
Defines the button color variant. Example values: 'default-primary' , 'default-secondary' , 'default-tertiary' , 'default-link' , 'error-primary' , 'error-secondary' , 'error-tertiary' , 'error-link' ,
'onsurface-primary' , 'onsurface-secondary' , 'onsurface-tertiary' , 'onsurface-link' ,
'secondary' , 'success' , 'warning' , 'surface' , 'surface-variant' , 'disabled'
string
start_icon
The name of the icon to display at the start of the button. Uses Material Icons.
string
button_text
The text for button
string
text_button_id
Unique identifier for the button element.
string
aria_label
Accessibility label for screen readers.
string
text_button_name
Name attribute for the button component
string
value
Value of the button
string
button_shape
Defines the button's shape. Example values: 'rounded', 'square'
string
size
cifies the button size. Example values: 'sm', 'md', 'lg'.
string
gap
Specifies the spacing between elements inside the button. 1 , 2
number
disabled
Determines if the button should be disabled.
boolean
custom_class
Allows adding a custom CSS class to the button for additional styling.
string
component_mode
Used for setting a mode-related styling or behavior.
string
onclick
Function to be executed when the button is clicked.
(event: MouseEvent) => void
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
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.
Last updated