Buttons

Component type

• Component

Dependencies:

| Name | Description | | ---------------------------------------- | --------------------------------------------------------- | | @citizensadvice/cads-support | System-wide global variables and functions | | @citizensadvice/cads-interactive-block | Mixins for handling interactive element (buttons, inputs) |

Installation

$ npm install @citizensadvice/cads-buttons

@import "@citizensadvice/cads-buttons/index.scss";

You can also make use of the unpkg service, try adding the link below to the head of your HTML file <link src="https://unpkg.com/@citizensadvice/cads-buttons@latest/build/cads.buttons.css" />

Implementation

Button components take on a couple different forms depending on use case. Pay careful attention of where and when to use specific examples.

Use sentence case for text on buttons. The width of the button will depend on the text on the button. When placing text in buttons

• be concise
• do not use a long sentence
• use trigger words like Download, View or Print
• Buttons should be aligned left and the left edge should align with the content on the page.

If links must be styled as buttons they should be calls to action, such as, Next, Start or Confirm.

If you want to link users between pages of a website, use links instead. If the action is less popular or less important, you can use a link instead of a button.

Primary buttons

In general, use primary buttons for actions that go to the next step

<button type="button" class="c-btn c-btn--primary">
  Primary button
</button>

Secondary buttons

Use secondary buttons for actions that happen on the same page.

<button type="button" class="c-btn c-btn--secondary">
  Secondary button
</button>

Tertiary buttons

We also have tertiary buttons which are smaller in size and have a blue border.

When creating a tertiary button, remember to add the c-btn--sm class. This is how we'd prefer to see them, but rather than making the tertiary class specify this, we'd prefer to use a modifier class which makes it more scalable in future in the code.

<button type="button" class="c-btn c-btn--sm c-btn--tertiary">
  Tertiary button
</button>

Icons in buttons

You should always place icons on the right of the button text. Use icons for specific actions for example Download, Print or Expand.

The exception is the previous button, which has an arrow pointing left to the left side of the text.

Disabled buttons

Don't disable buttons - unless there’s a good reason. For example, you could disable a button in a booking system if there are no bookings available.

You should give the user another way to continue - like by adding an error message or text to explain why the button is disabled

Accessibility

Buttons should display a visible focus state when users tab to them Avoid using <div> or <img> tags to create buttons. Screen readers don’t automatically know either is a usable button.

When styling links to look like buttons, remember that screen readers handle links slightly differently than they do buttons. Pressing the Space key triggers a button, but pressing the Enter key triggers a link.

Use the aria-disabled attribute for older screen readers.