Overview

Buttons express what action will occur when the user clicks or touches it. Buttons are used to initialize an action, either in the background or foreground of an experience. Each page can have one or two primary buttons. Any remaining calls-to-action should be represented as secondary buttons or another variation.

They should be used in situations where users might need to:

• Submit a form
• Begin a new task
• Trigger a new UI element to appear on the page
• Specify a new or next step in a process

Button vs. Link

The HTML elements for buttons and links describe a very specific type of action that is going to be taken when they are used. It is important you know when to use which, as the distinction matters:

• Use a link when you’re navigating to another place, such as: a “Next step” page, “Company” profile, etc.
• Use buttons when you are performing an action, such as: “submit,” “split,” “create new,” “upload,” etc.
• An action is almost always on the same page

If pressing a Button results in a new URL, or the resultant UI makes sense as “a new browser tab”, that is a link <a>. Everything else is a <button>.

Finally, color alone does not suffice when conveying the meaning of buttons. Ensure that the text you use in the button matches the meaning you are trying to convey via color. For example, if you use the destructive button to point out a potential warning, make sure the text communicates the same message.

Base

The base c-btn looks like a plain text link. It removes all the styling of the native button.

Variations

Base button

Add the base class c-btn to a <button> or <a> element to create the default button. Only use another style if a button requires more or less visual weight.

<!-- default button starts -->
<button class="c-btn">default button</button>
<!-- default button ends -->

Primary button

To create the primary button, add the c-btn--primary class to the c-btn class.

Generally should only be used once per component screen at any one time. It is used for when there is an action that is clearly more important than the other actions and you need to draw attention to it. An example is when you have a “Save” and “Cancel” button. The “Save” is the primary action.

Not all features need to have primary actions, sometimes the actions are secondary to the content and are all of equal importance.

<!-- primary button starts -->
<button class="c-btn c-btn--primary">primary button</button>
<!-- primary button ends -->

Outline button

To create the outline button, add the c-btn--outline class to the c-btn class.

<!-- outline button starts -->
<button class="c-btn c-btn--outline">outline button</button>
<!-- outline button ends -->

Plain button

To create the plain button, add the c-btn--link class to the c-btn class.

<!-- link button starts -->
<button class="c-btn c-btn--link">link button</button>
<!-- link button ends -->

Icon buttons

The SVG, element, or icon inside the button should have the o-icon class and receives the c-btn--icon class from the button. The position of the icon is on the left by default but you can position it on the right using c-btn--icon--right, which applies the correct amount of space between the icon and the text.

<!-- Icon left button starts -->
<button class="c-btn c-btn--icon"><svg class="o-icon" aria-hidden="true"><use href="#approval"></use></svg> Button with icon</button>
<!-- default button ends -->

<!-- Icon right button starts -->
<button class="c-btn c-btn--icon c-btn--icon--right c-btn--icon--right">Button with icon <svg class="o-icon" aria-hidden="true"><use href="#approval"></use></svg></button>
<!-- icon--right button ends -->

Destructive button

To create the destructive button, add the c-btn--destructive class to the c-btn class. This button is used to indicate a destructive action to the user, like permanently erasing data.

<!-- destructive button starts -->
<button class="c-btn c-btn--destructive">destructive button</button>
<!-- destructive button ends -->

Sizes

Buttons default size are determined by the c-btn class. To change the size, add the following classes: c-btn--xs for small and c-btn--lg for large.

<!-- default small button starts -->
<button class="c-btn c-btn--xs">Small button</button>
<!-- default small button ends -->

<!-- default size button starts -->
<button class="c-btn">Default size button</button>
<!-- default size button ends -->

<!-- default large button starts -->
<button class="c-btn c-btn--lg">Large button</button>
<!-- default large button ends -->

Full width

To allow the button’s width to take up the entire width available, apply the c-btn--block class to the button.

<!-- default block button starts -->
<button class="c-btn c-btn--block">Block button</button>
<!-- default block button ends -->

Variations overview