# Split Button

## Overview

<figure><img src="/files/Xcgl8k9NxP5qRekRKjbl" alt=""><figcaption></figcaption></figure>

## 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

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<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>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaSplitButton
    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>
</DdaSplitButton>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaSplitButton
    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>
</DdaSplitButton>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<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>
```

{% endtab %}
{% endtabs %}

### Properties

| Property                                                                                                                                                               | Descriptions                                                                                                                                                                                                                                                                                                         | Type                          |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- |
| `text_button_type`                                                                                                                                                     | Specifies the button type. Common values: `"button"`, `"submit"`, `"reset".`                                                                                                                                                                                                                                         | `string`                      |
| `button_color`                                                                                                                                                         | <p>Defines the button color variant. Example values: <code>'default-primary'</code> , <code>'default-secondary'</code> , <code>'default-tertiary'</code> , <code>'default-link'</code> , <code>'error-primary'</code> , <code>'error-secondary'</code> , <code>'error-tertiary'</code> , <code>'error-link'</code> , |                               |
| <br><code>'onsurface-primary'</code> , <code>'onsurface-secondary'</code> , <code>'onsurface-tertiary'</code> , <code>'onsurface-link'</code> ,                        |                                                                                                                                                                                                                                                                                                                      |                               |
| <br><code>'secondary'</code> , <code>'success'</code> , <code>'warning'</code> , <code>'surface'</code> , <code>'surface-variant'</code> , <code>'disabled'</code></p> | `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`                                                                                                                                                                | <p></p><p>Value of the button</p>                                                                                                                                                                                                                                                                                    | `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

<figure><img src="/files/ByOC4KWKbavgulv1kpHL" alt=""><figcaption></figcaption></figure>

### 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.               |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://designsystem.dubai.ae/components/buttons/split-button.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.