Go to main content
Version-1.3.0

Button

Button is an extension of the standard button element with icons and theming.

When to use

  • Buttons are clickable elements that are used to trigger actions.
  • Use buttons to communicate actions users can take, and it allows users to interact within the application.

Guidelines

  • Use a clear and concise label for the button as it expresses what action will occur when the user interacts with it, so it’s for better understanding for the user.
  • The hover state is a modified version of the button colour to indicate that the button has hovered over.
  • The focused state has a black border for all button types.
  • The disabled button is greyed out and does not indicate the priority of the original button.
  • Consider adding an icon to signal specific actions (e.g., if there is a button named download, then with the label place an icon as well).
  • Button sizes can vary depending on their usage and location across the page.

    • Primary Button

  • Used to indicate the primary action on a page.
  • In ideal scenarios, there should only be one primary button on a page, so the user is aware of the most important action.

    • Secondary Button

  • Used for prominent actions on the page, such as adding a new item, or actions that have less importance than the primary button.
  • These buttons have a secondary colour as a background and white coloured text.
  • Secondary buttons can mostly be used in conjunction with a primary button.

    • Tertiary buttons

  • Used for actions with no specific hierarchy on the page.
  • For less prominent, and sometimes independent, actions.
  • These are styled with a white background with charcoal coloured text and a charcoal colour border.

    • Ghost buttons

  • In a situation such as a progress flow, a ghost button may be paired with a primary button, where the primary button is for forward and main action, and the ghost button is for “Cancel” and “Back” actions.
  • For the least pronounced actions such as “cancel”, “remove” and “delete”, often used in conjunction with a primary button.
  • It gets the name “ghost” to describe the transparent nature as there is a lack of fill colour, it takes on the background’s appearance.

    • Warning buttons

  • Warning buttons are used for actions that could have destructive effects on the user’s data.
  • Warning buttons are designed to make users think carefully before using.
  • Use these for actions with destructive consequences, for example deleting a record.
  • It is best practice to include an additional confirmation step for destructive actions. Use another button for the initial call to action and the warning button for final confirmation.
  • These buttons are red to enforce to the user that clicking will have a negative response. However, do not only rely on the red colour of a warning button to communicate the serious nature of the action, because not all users will be able to see the colour or understand what it signifies.
  • Hover state is an inverted version rather than using a modified colour.

Basic

Text to display on a button is defined with the label property. 

 <button type="button" class="btn btn-primary">Submit</button>

Sizes

Button provides small and large sizes as alternatives to the standard. 

<button type="button" class="btn btn-primary icon-left-button btn-sm"><i class="ds ds-user"></i>Primary</button>
<button type="button" class="btn btn-primary icon-left-button"><i class="ds ds-user"></i>Primary</button>
<button type="button" class="btn btn-primary icon-left-button btn-lg"><i class="ds ds-user"></i>Primary</button>

Severity

Severity defines the type of button. 

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-tertiary">Tertiary</button>
<button type="button" class="btn btn-ghost">Ghost</button>
<button type="button" class="btn btn-warning">Warning</button>

Submit

When disabled is present, the element cannot be edited. 

<button type="button" class="btn btn-disabled" disabled>Disabled</button>

Icons

Icon of a button and its position is specified using <i class=""> and <class="btn btn-primary icon-right/left-button">

<button type="button" class="btn btn-primary icon-only-button me-2" aria-label="user"><i class="ds ds-user"></i></button>
<button type="button" class="btn btn-primary icon-left-button me-2" aria-label="user primary"><i class="ds ds-user"></i>Primary</button>
<button type="button" class="btn btn-primary icon-right-button" aria-label="user primary">Primary<i class="ds ds-user"></i></button>

Icons Only

Buttons can have icons without labels.



<button type="button" class="btn btn-primary icon-only-button me-2" aria-label="check"><i class="ds ds-checkmark"></i></button>
<button type="button" class="btn btn-secondary icon-only-button me-2" aria-label="bookmark"><i class="ds ds-bookmark"></i></button>
<button type="button" class="btn btn-tertiary icon-only-button me-2" aria-label="search"><i class="ds ds-search"></i></button>
<button type="button" class="btn btn-ghost icon-only-button me-2" aria-label="user"><i class="ds bi-user"></i></button>
<button type="button" class="btn btn-warning icon-only-button" aria-label="bell"><i class="ds ds-bell"></i></button>

Accessibility

  • Buttons can be reached by Tab and selected with Space or Enter.
  • The button has an accessible label that is read by screen reader, so user comes to know purpose of the button.
  • When semantic HTML is used, then it will be easily accessible, but if not used then we can provide role=”button”.
  • Touch targets must be at least 44px by 44px for meeting WCAG AAA compliance. Due to this, a AAA compliant system cannot use small or extra small buttons.
When to use Guidelines Basic Sizes Severity Disabled Icons Icon Only Accessibility
undefined