Button

Use the button component to help users carry out an action like submitting a form. You should avoid using buttons for simple links. Use regular text links instead.

Write button text in sentence case, describing the action it performs. E.g. “Save and continue” rather than “Submit”.

How it works

Primary buttons should be used for the main action, such as submitting a form. Align the primary action button to the left edge of your form.

<button class="cads-button cads-button__primary" type="button">
  Primary button
</button>

<%= render CitizensAdviceComponents::Button.new(variant: :primary) do %>
  Primary button
<% end %>

Secondary button should be used for secondary calls to action. Typically there should be only one primary button and one secondary button within a form. Before adding more than one secondary button, reconsider how you are structuring your design and try to break it down or make it simpler.

<button class="cads-button cads-button__secondary" type="button">
  Secondary button
</button>

<%= render CitizensAdviceComponents::Button.new(variant: :secondary) do %>
  Secondary button
<% end %>

Tertiary buttons are used for turning something on or off instantly on a page – for example, references and “Expand all” actions.

<button class="cads-button cads-button__tertiary" type="button">
  Tertiary button
</button>

<%= render CitizensAdviceComponents::Button.new(variant: :tertiary) do %>
  Tertiary button
<% end %>

Link buttons are styled to look like hyperlinks. Use these when you want a button to draw less attention, or when you would prefer to have a text styling but the action changes state such as deleting an item or logging out a user.

<button type="button" class="cads-linkbutton">Link button</button><br>
<button type="button" class="cads-linkbutton__regular">Regular link button</button>

Using buttons with icons

Icons can be placed next to the button label to clarify an action or call attention. Buttons can be used with either a left or right aligned icon. The spacing between an icon and the button text should be 4px. Use the small icon (16px) within a button. The icon must be the same color value as the text.

Previous / next

We use “Next” and “Previous” buttons in a multi-step form to help users navigate between pages.

They are:

• aligned to the left so users do not miss it
• the primary button “Next” should come first
• the secondary button “Previous” is aligned below so the arrows don’t point to each other, which would be confusing

<div>
  <button class="cads-button cads-button__primary" type="button">
    Next
    <span class="cads-button__icon-right"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="cads-icon cads-icon--small cads-icon--arrow-right" focusable="false" aria-hidden="true">
        <path d="M11.73 8 7.727 3.94a.57.57 0 0 1 0-.804l.956-.97a.56.56 0 0 1 .794 0l5.36 5.43a.569.569 0 0 1 0 .806l-5.36 5.43a.564.564 0 0 1-.613.124.555.555 0 0 1-.181-.123l-.956-.97a.57.57 0 0 1 0-.804l4.005-4.06Z" />
      </svg></span>
  </button></div>
<div>
  <button class="cads-button cads-button__secondary" type="button">
    <span class="cads-button__icon-left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="cads-icon cads-icon--small cads-icon--arrow-left" focusable="false" aria-hidden="true">
        <path d="m4.27 8 4.005-4.06a.569.569 0 0 0 .122-.62.569.569 0 0 0-.122-.184l-.956-.97a.56.56 0 0 0-.612-.123.56.56 0 0 0-.182.124l-5.36 5.43a.569.569 0 0 0-.122.62c.028.07.07.132.122.185l5.36 5.431a.563.563 0 0 0 .397.167.555.555 0 0 0 .397-.167l.956-.97a.57.57 0 0 0 .122-.62.57.57 0 0 0-.122-.184L4.27 8Z" />
      </svg></span>
    Previous
  </button></div>

<div>
  <%= render CitizensAdviceComponents::Button.new do |c| %>
    Next
    <% c.with_icon_right do
      render CitizensAdviceComponents::Icons::ArrowRight.new
    end
  end %>
</div>
<div>
  <%= render CitizensAdviceComponents::Button.new(variant: :secondary) do |c| %>
    Previous
    <% c.with_icon_left do
      render CitizensAdviceComponents::Icons::ArrowLeft.new
    end
  end %>
</div>

In different contexts, you can use primary and secondary buttons side by side. Your team should design this based on the user needs and context of the service.

Accessibility

Buttons have a clear :focus style when tabbing or focussing on the button When selecting a button, it will depress slightly to give users visual feedback that an action has taken place.

Use <input type=submit> or <button> elements depending on if the button submits a form, or performs an interaction. Do not use anchor tags with an empty href when you want a button <a href=”#”>. Read more about why the empty href is a bad thing.

Using with Rails

If you are using the citizens_advice_components gem, you can call the component from within a template using:

<%= render CitizensAdviceComponents::Button.new(variant: :primary) do %>
  Primary button
<% end %>

Component arguments

Icon slots

The button component accepts an icon_left or icon_right slot for buttons with icons.

<div>
  <%= render CitizensAdviceComponents::Button.new do |c| %>
    Next
    <% c.with_icon_right do
      render CitizensAdviceComponents::Icons::ArrowRight.new
    end
  end %>
</div>
<div>
  <%= render CitizensAdviceComponents::Button.new(variant: :secondary) do |c| %>
    Previous
    <% c.with_icon_left do
      render CitizensAdviceComponents::Icons::ArrowLeft.new
    end
  end %>
</div>