Skip to main content

Patterns

Buttons

The base button class, .btn, is extended with either .btn-primary or .btn-secondary. Any button type class can be added by the the primary or secondary class (see examples below).

There are two types for Button Elements:

  • Buttons associated with functionality (Primary, Blue).
  • Buttons that navigate users through a set of pages, such as through the program pages (Secondary, Green).

Markup

Buttons should be written using the <button> html tag. However, if a button is an <a> tag styled with the .btn class and has in-page functionality (such as toggling elements), the role attribute should be set to "button" and the tabindex attribute should be set to "0." Refer to the best practices illustrated in the MDN documentation for the "button" role.

If the button is a <button> element and appears within a <form> tag, the type attribute should be explicitly set to "submit," "reset," or "submit." By default (without the type attribute) <button> elements are set to the "submit" type.

<button class="btn" type="button">Button</button>

Primary Button Elements are used for functional actions and in some cases have an icon to the left of the call-to-action.

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

Secondary Button Elements are used for navigation.

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

The small button modifier will decrease any button font size to .727rem.

<button class="btn-primary btn-small" type="button">Small Button</button>

The btn-normal class allows for setting responsive button sizes for tablet and desktop screens. This button will appear smaller on screens less than desktop width using the screen-desktop: media query utility.

<button class="btn-primary btn-small screen-desktop:btn-normal" type="button">Normal Button</button>

Tag Button Elements are associated with related programs. Clicking on a tag should bring up the programs page filtered to the appropriate tag.

<button class="btn-primary btn-tag" type="button">Tag</button>

Toggle Button Elements are used to change the state or appearance of another target element. This example uses the JavaScript Toggle Utility for interactivity and accessibility. Additionally, refer to the Toggle Utility documentation for different toggling animation options.

Toggle button target element
<button aria-controls="btn-toggle-target" aria-expanded="true" class="btn-toggle btn-primary w-full mb-2" data-js="toggle" id="btn-toggle" type="button">Toggle Button</button>
<div aria-hidden="false" class="bg-color-blue-light p-4 text-center active" id="btn-toggle-target">Toggle button target element</div>
<button class="btn-text" type="button">Plain Text Button</button>

Next Button Elements prompt the user to navigate to the next page or view.

<button class="btn-secondary btn-next" type="button">Next Button</button>

Previous Button Elements prompt the user to navigate back to the previous page or view.

<button class="btn-secondary btn-previous" type="button">Previous Button</button>