Button

Design System - Button component

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.

Component React

// Sample code

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

Component Flutter

// Sample code

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

Component Design

https://www.figma.com/design/sH2pLZBXZZ6c7LlfQwFFjR/Design-System?node-id=10013-14407&t=bXeR2K2cY0SyAPnC-0www.figma.com

Anatomy

---

Variants

---

	Primary 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.
	Secondary 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.
	Tertiary 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.
	Link 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.

Properties

Label 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.
Disabled 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.
Icon 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.
Size 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.
Type 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.

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.

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	-

Flutter

Property	Value	Default
label	String	required
onPressed	VoidCallBack Function	-
type	ButtonType(primary, secondary, tertiary, link)	-primary by default
size	ButtonSize(large, medium, small)	large by default
prefixIcon	IconData	-
suffixIcon	IconData	-
buttonTheme	DefaultButtonTheme	-
isDisabled	bool	false
capitalizedLetters	bool	true

Behaviours

---

	Hover State 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.
	Mousedown State 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
	Flexible Width 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.
	Character Limit The default character limit for buttons is set to 64 characters to promote clear and concise actionable labels.
	Truncated Label 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.

Usage Guide

---

	Use icons only when necessary Add icons to buttons only when they provide meaningful context or reinforce the action. Icons should be highly relevant and improve user understanding. Never include icons purely for visual appeal or without a clear purpose. Decorative icons can confuse users and detract from the button's functionality.
	Do not override button colour Do not use custom colors for buttons. The colors of different button variations have been designed to be consistent and accessible.

Content Guidelines

Concise and actionable labels 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. 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.

Casing 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.” 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.

Change log

---

Date	Number	Notes

Design Checklist

---

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