Buttons

Buttons are essential interactive elements that guide users through actions and workflows. They should be clear, consistent, and easily identifiable, helping users understand what to do next. This guide defines button styles, states, and usage to ensure a cohesive experience across our application.

Styled Links Primary Secondary Important Tertiary Underline Content
Alt Text

Primary

Buttons are categorized by importance and can be applied to a variety of html nodes. Each variation has intention and should be used sparingly.

Primary Button
Primary-Light Button

Code Snippet

<button class="button margin-bottom--lv3">Default</button>
<button class="button p0 margin-bottom--lv3">Important</button>
<button class="button p1 margin-bottom--lv3">Primary Action</button>
<button class="button p2 margin-bottom--lv3">Caution</button>

Back to top

Notes

You can create buttons using the button HTML tag accompanied by the button class.

To style an anchor (a) tag as a button use the button class.

To style an input as a button use the button class and define a label by adding a value attribute.

Secondary

Buttons are categorized by importance and can be applied to a variety of html nodes. Each variation has intention and should be used sparingly.

Secondary Button
Secondary-Light Button
Secondary-Stroke Button

Code Snippet

<button class="button margin-bottom--lv3">Default</button>
<button class="button p0 margin-bottom--lv3">Important</button>
<button class="button p1 margin-bottom--lv3">Primary Action</button>
<button class="button p2 margin-bottom--lv3">Caution</button>

Back to top

Notes

You can create buttons using the button HTML tag accompanied by the button class.

To style an anchor (a) tag as a button use the button class.

To style an input as a button use the button class and define a label by adding a value attribute.

Important

Buttons are categorized by importance and can be applied to a variety of html nodes. Each variation has intention and should be used sparingly.

Important Button
Important-Light Button

Code Snippet

<button class="button margin-bottom--lv3">Default</button>
<button class="button p0 margin-bottom--lv3">Important</button>
<button class="button p1 margin-bottom--lv3">Primary Action</button>
<button class="button p2 margin-bottom--lv3">Caution</button>

Back to top

Notes

You can create buttons using the button HTML tag accompanied by the button class.

To style an anchor (a) tag as a button use the button class.

To style an input as a button use the button class and define a label by adding a value attribute.

Content

We use CTA buttons to go back and forth on a page, to begin or continue with a tax form, or to cancel the last action and exit a page.

CTA Buttons

Primary Button

Tone

The language should be concise, straightforward, and action-oriented text for button labels. It is typically only one or two words (ex. ‘CONTINUE’, ‘BACK’, ‘CANCEL’, ‘LOG IN’).

Exception: ‘OK, GOT IT’

Avoid vague labels like ‘Click Here’ or ‘Go’.

Grammar

Buttons always use ALL CAPS.

Buttons will never be complete sentences and will always omit terminal punctuation.

There should be a character limit of 20 characters per button. When you are referring to a CTA in the body copy or helper text, do not use all caps. Instead, only capitalize the first word of the CTA.

Example: Select Continue to set up multi-factor authentication. Button: CONTINUE

Add Another Buttons

Notes

The “Add another…” button is used for adding another form to a summary screen or adding another state. This is subject to change, but here is the basic format:

Add a [single item]

Add another [single item]