Pattern Library

Components

Buttons

Buttons give users a strong visual cue to take an action. They are typically used for sign ups or in a step-by-step process.

Usability

Accessibility

Guidance

Primary

Primary buttons are the dominant pattern used for forms and strong call-to-actions. Blue is Primary button color for news.
Font: Dagny Pro, bold, 19px
Active state: Blue. Hover: Navy
Rounded corners: 3px

You can apply the .st-button class to button, input, or a elements.

Secondary

Secondary buttons signal a less important action or differentiate an action or type of content from the Primary. Orange Highlight (with Orange hover) button fill colors are used for Marketing pages. Gray is a color option to use sparingly.

NOTE: Only use the transparent buttons on light backgrounds.

Sizing

In addition to the default size, we have several alternatives sizes that can be applied to all buttons: small, small-padded, large, and block. Sizes can vary beyond these dimensions to accommodate the label or layout.

IMPORTANT: Using the block level class will make the button full width of parent element.

State

These are examples of button states outside our standard default and hover. Although they are rarely used, you can assign these utility classes to a button to toggle on/off the desired state.

Disabled

An example of where a diabled state would apply is in a form where the button is disabled until all fields are input correctly.

Make buttons look inactive by adding the disabled attribute to any button.st-button element or adding .disabled to any a.st-button element.

Transparent Button

Active

This applies to a button has been previously activated (or visited). Make buttons look active or toggled on by adding the .active class to any .st-button element.