# Button

The Button is a basic interactive element used to perform actions or navigate within an app. It helps users complete tasks like submitting forms, starting processes, or opening pages, making it an essential part of any interface.

<figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2F0kMgiBmYB7NHU6cghoig%2FImage.png?alt=media&#x26;token=519e056d-79b5-494d-9be1-b2d9c645cc3e" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="Component React" %}

```
// Sample code

<Button 
  icon="CheckCircle" 
  label={t("Label")} 
  title={t("LabelMore")} 
  onClick={() => console.log("clicked")} 
  type="button" 
  variation="primary" 
/>
```

{% endtab %}

{% tab title="Component Flutter" %}

```
// Sample code

DigitButton(
          label: Primary Button,
          onPressed: () {},
          type: DigitButtonType.primary,
          isDisabled: false,
          size: DigitButtonSize.small
          suffixIcon: Icons.home,
        );
```

{% endtab %}

{% tab title="Component Design" %}
{% embed url="<https://www.figma.com/design/sH2pLZBXZZ6c7LlfQwFFjR/Design-System?node-id=10013-14407&t=bXeR2K2cY0SyAPnC-0>" %}
{% endtab %}
{% endtabs %}

## Anatomy

***

<figure><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FxY2pFcTZBFaOeseWQNTZ%2FImage.png?alt=media&#x26;token=5c08a5d9-f3e0-42fd-9b51-fd5809b835b2" alt=""><figcaption></figcaption></figure>

## Variants

***

<table data-header-hidden><thead><tr><th width="321"></th><th></th></tr></thead><tbody><tr><td><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FZplH6XRSEpd5T7gLZus5%2FImage1.png?alt=media&#x26;token=a013800c-77d5-416f-9be6-b7e7436eb8ff" alt=""></td><td><p>P<strong>rimary</strong> </p><p>The primary button is the default action button and is used for the most prominent action on a page or view. It uses a solid fill color to stand out. Only one primary button should appear per view to maintain a clear focus and hierarchy. Use it thoughtfully to avoid overwhelming users or diluting its importance.</p></td></tr><tr><td><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FicPEpXpDgwYnEutpO48x%2FImage2.png?alt=media&#x26;token=356c0b74-4a12-4aaa-8645-a5bf799effe5" alt="" data-size="original"></td><td><strong>Secondary</strong><br>The secondary button communicates a moderate level of emphasis and is intended for actions that complement the primary or accent actions in a view. With a simple stroke and no fill, it maintains a clean and subtle appearance. These buttons are typically used for secondary tasks or options that provide additional functionality but are not critical to the core experience. </td></tr><tr><td><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FUKnTb4XIu9ioCRplM8t1%2FImage3.png?alt=media&#x26;token=9eb0f549-97ca-42a4-a8fc-a169dc8fb9cf" alt=""></td><td><p><strong>Tertiary</strong></p><p>The tertiary button is a minimal, text-only variant designed for actions with less prominence in the overall hierarchy. It is used for secondary or supportive actions that complement primary tasks.</p></td></tr><tr><td><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2F0xyaYxjiZW7OcR3P1hVt%2FImage4.png?alt=media&#x26;token=65e3baaa-0514-4a67-a0a4-139d9ea8b9cb" alt="" data-size="original"></td><td><strong>Link</strong><br>The link button communicates navigation or secondary actions and is represented as text with an underline. Use link buttons to direct users to related content, additional resources, or less critical actions without disrupting the visual hierarchy of the page.</td></tr></tbody></table>

## Properties

<table data-header-hidden data-full-width="false"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><strong>Label</strong><br>This property represents the text displayed inside the button. It is a required field and helps users understand the action that the button will trigger. The label should be concise and clear to communicate the button’s purpose effectively.<br></td><td><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FarqXk5SiApnsHuIHvjMz%2FImagep1.png?alt=media&#x26;token=7c214eef-8ab6-4881-9118-e6cfdb35488a" alt=""></td></tr><tr><td><strong>Disabled</strong><br>The “isDisabled” property disables the button, preventing any user interaction. It also applies a disabled visual style (like graying out the button) to indicate that the button is not active.</td><td><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2F9lpaNtzSzNbiJOUl6PWp%2FImagep2.png?alt=media&#x26;token=56ed7efd-fa7c-4a58-bc08-70cce071ead9" alt=""></td></tr><tr><td><strong>Icon</strong><br>The icon property specifies the name of the icon to be rendered inside the button. This helps provide a visual cue along with the button text. The icon placement can be either before or after the label based on the how the “Prefix” and “Suffix” properties are defined.</td><td><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2F2UHlxGxWqI2LknrCmWqh%2FImagep3.png?alt=media&#x26;token=de54909e-2eef-458b-a1a0-613bdc2c8503" alt=""></td></tr><tr><td><strong>Size</strong><br>The size property specifies the size of the button. You can choose between "large", "medium", and "small" to adjust the button's height and font size.</td><td><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FvVyuSQRsKCu6Zb3GhLnT%2FImagep4.png?alt=media&#x26;token=c7dc5219-5a0e-427c-80fe-1303b8028179" alt=""></td></tr><tr><td><strong>Type</strong><br>The type property determines the HTML type attribute for the button, such as "submit", "button", or "actionButton". This is useful for form submission or defining button behavior in HTML forms.</td><td><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2F3EKZy6XSzuTSpac5Tn9c%2FImagep5.png?alt=media&#x26;token=b067b472-daad-4c85-a40c-8a70640a3b7e" alt=""></td></tr></tbody></table>

## Property Configuration Table

Each design component offers a range of configurable options. These options are intentionally platform-agnostic, allowing implementations to adapt and tailor them to align with the specific requirements of the chosen framework.

{% tabs %}
{% tab title="React" %}

| Property              | Value                      | Default |
| --------------------- | -------------------------- | ------- |
| label                 | string                     | -       |
| variation             | string                     | primary |
| iconFill              | string                     | -       |
| isDisabled            | boolean                    | -       |
| type                  | string                     | -       |
| icon                  | string                     | -       |
| size                  | string                     | large   |
| ref                   | reference to a DOM element | -       |
| className             | string                     | -       |
| submit                | string                     | -       |
| formId                | string                     | -       |
| onClick               | function                   | -       |
| title                 | string                     | -       |
| style                 | object                     | -       |
| isSuffix              | boolean                    | -       |
| textStyles            | object                     | -       |
| hideDefaultActionIcon | boolean                    | -       |
| options               | array                      | -       |
| isSearchable          | boolean                    | -       |
| optionsKey            | string                     | -       |
| menuStyles            | object                     | -       |
| showBottom            | boolean                    | -       |
| onOptionSelect        | function                   | -       |
| {% endtab %}          |                            |         |

{% tab title="Flutter" %}

<table><thead><tr><th>Property</th><th width="209">Value</th><th>Default</th></tr></thead><tbody><tr><td>label</td><td>String</td><td>required</td></tr><tr><td>onPressed</td><td>VoidCallBack Function</td><td>-</td></tr><tr><td>type</td><td>ButtonType(primary, secondary, tertiary, link)</td><td>-primary by default</td></tr><tr><td>size</td><td>ButtonSize(large, medium, small)</td><td>large by default</td></tr><tr><td>prefixIcon</td><td>IconData</td><td>-</td></tr><tr><td>suffixIcon</td><td>IconData</td><td>-</td></tr><tr><td>buttonTheme</td><td>DefaultButtonTheme</td><td>-</td></tr><tr><td>isDisabled</td><td>bool</td><td>false</td></tr><tr><td>capitalizedLetters</td><td>bool </td><td>true</td></tr></tbody></table>
{% endtab %}
{% endtabs %}

## Behaviours

***

| ![](https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FPz3w0LVSNJhh9q3b5tal%2FImageb1.png?alt=media\&token=4b9f1cae-5125-40c5-8689-20c52d80e1e9) | <p><strong>Hover State</strong></p><p>When a user hovers over the button, a visual cue is added to emphasize interactivity. This is achieved by introducing a subtle line below the button. The line appears as a clean, horizontal underline that complements the button's style, without overwhelming the design. The hover state enhances the button's affordance, guiding users and improving interactivity without altering the button’s primary layout or design.</p> |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FFbCpO3KYuVpq6vosB96v%2FImageb2.png?alt=media\&token=7432baeb-10ca-4309-b87d-78e6826d73de) | <p><strong>Mousedown State</strong></p><p>The Mouse Down state of the button represents the moment when the user clicks and holds the button. This state provides immediate feedback to the user, confirming that their interaction has been registered. The text label becomes bolder, emphasizing the active interaction</p>                                                                                                                                              |
| ![](https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FAKsbiwleap9H3E7mkQ2X%2FImageb1.png?alt=media\&token=786bd198-a86c-42d6-97f1-69f23d6979ea) | <p><strong>Flexible Width</strong></p><p>The width of the button adjusts to the length of the text. This behaviour is dynamic with respect to the character limit defined. There is no text overflow in buttons.</p>                                                                                                                                                                                                                                                        |
| ![](https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2F0UlAILC3892ocTBYFszU%2FImageb2.png?alt=media\&token=fb332a2f-4f5a-4246-adb6-e48e76a6041e) | <p><strong>Character Limit</strong></p><p>The default character limit for buttons is set to 64 characters to promote clear and concise actionable labels.</p>                                                                                                                                                                                                                                                                                                               |
| ![](https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FQpL7ix8AoeX30B3ez8ze%2FImageb3.png?alt=media\&token=0483734f-1b50-4f8a-a8a2-741c36efdbb0) | <p><strong>Truncated Label</strong></p><p>If the label is too long to fit within the button, it will be truncated. The full text will be displayed on hover for web and on long press for mobile interfaces.</p>                                                                                                                                                                                                                                                            |

## Usage Guide

***

<table data-header-hidden><thead><tr><th></th><th valign="top"></th></tr></thead><tbody><tr><td><p><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FZkHAO72BPiAhCixzNazn%2FImageb4.png?alt=media&#x26;token=d37f7e3f-11bb-4ead-a445-77be0100adbd" alt=""></p><p><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FkHoxghnPWrAOW53odcln%2FImageb5.png?alt=media&#x26;token=f6ad1224-f585-4cd2-8abf-7350e661d079" alt=""></p></td><td valign="top"><p><strong>Use icons only when necessary</strong></p><p>Add icons to buttons only when they provide meaningful context or reinforce the action. Icons should be highly relevant and improve user understanding.

</p><p>Never include icons purely for visual appeal or without a clear purpose. Decorative icons can confuse users and detract from the button's functionality.</p></td></tr><tr><td><img src="https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2F4m1fEb3gbVzj82MsUMat%2FImageb6.png?alt=media&#x26;token=f9f3de4e-54f6-4991-bd72-9ebc28670ade" alt=""></td><td valign="top"><p><strong>Do not override button colour</strong></p><p>Do not use custom colors for buttons. The colors of different button variations have been designed to be consistent and accessible.</p></td></tr></tbody></table>

## Content Guidelines

| <p><strong>Concise and actionable labels</strong></p><p>Button labels should be clear, concise, and action-oriented to help users understand their purpose instantly. Instead of words which are not verbs like "My Bills" or "Inbox," use specific phrases like "Download Bills " or "View Application" that tell users what will happen when clicked. 

</p><p>Avoid unnecessary words that clutter the label—brevity improves readability and reduces cognitive load. Labels should also align with user expectations; for example, a delete action should say "Delete" instead of "Remove" if deletion is permanent. 


</p> | ![](https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FrBn9rf9zibSxdLhWqnvj%2FImageb7.png?alt=media\&token=3a31969f-a0fd-4d27-a3a5-599ff812e909) |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>Casing</strong></p><p>Use ‘Titlecase’ for buttons. This means capitalising the first letter of all words, except for articles and conjunctions. Eg. “Submit Feedback”, “Create Account”, “Learn More.”

</p><p>Title case enhances the emphasis of actions at the same time ensuring accessibility and readability. There can be exception to this casing definition if the action is a sentence.</p>                                                                                                                                                                                                                 | ![](https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2FTghfMRkpVRKdDLLgtbBH%2FImageb8.png?alt=media\&token=39444127-9f42-47f8-bb3c-1d7b0a106e14) |

## Change log

***

| Date | Number | Notes |
| ---- | ------ | ----- |
|      |        |       |
|      |        |       |
|      |        |       |

## Design Checklist

***

<table data-header-hidden><thead><tr><th width="129" data-type="checkbox"></th><th></th></tr></thead><tbody><tr><td>true</td><td><strong>All interactive states</strong><br>Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).</td></tr><tr><td>true</td><td><strong>Accessible use of colours</strong><br>Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).</td></tr><tr><td>true</td><td><strong>Accessible contrast for text</strong><br>Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).</td></tr><tr><td>true</td><td><strong>Accessible contrast for UI components</strong><br>Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).</td></tr><tr><td>true</td><td><strong>Keyboard interactions</strong><br>Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).</td></tr><tr><td>false</td><td><strong>Screen reader accessible</strong><br>All content, including headings, labels, and descriptions, is meaningful, concise, contextual and accessible by screen readers.</td></tr><tr><td>true</td><td><strong>Responsive for all breakpoints</strong><br>Responsiveness for 3 breakpoints - Mobile, Tablet and Desktop</td></tr><tr><td>true</td><td><strong>Usage guidelines</strong><br>Includes a list of dos and don'ts that highlight best practices and common mistakes.</td></tr><tr><td>true</td><td><strong>Content guidelines</strong><br>Content standards and usage guidelines for writing and formatting in-product content for the component.</td></tr><tr><td>true</td><td><strong>Defined variants and properties</strong><br>Includes relevant variants and properties (style, size, orientation, optional iconography, decorative elements, selection states, error states...etc)</td></tr><tr><td>true</td><td><strong>Defined behaviors</strong><br>Guidelines for keyboard navigation and focus, layout management (including wrapping, truncation, and overflow), animations, and user interactions.</td></tr><tr><td>true</td><td><strong>Design Kit</strong><br>Access to the design file for the component in Figma multiple options, states, color themes, and platform scales.</td></tr></tbody></table>