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

• Use a button for the dominant call to action on the page. Use a text link for less important actions, such as “Forgot my password.”
• Because a button strongly implies to the user they are moving forward in some way, there is a perception of risk. To alleviate fears of proceeding into the unknown, labels should be explicit to clearly set expectations, such as “Continue” in a multi-step process or “Create a profile” when submitting a form.
• The Primary and Secondary patterns can help users make sense of a page, such as, how it is organized or the type of content. When there are multiple buttons on a single page, a disctintion beteen buttons can help assign meaning based on the content or action the user will take. Apply in a case-by-case basis.

Accessibility

• Write button labels to clearly state the action the button will trigger. This will help users with screen readers as well as sighted users.
• Buttons should display a visible focus state when users tab to them.
• Avoid using < div > or < img > tags to create buttons. Screen readers don’t automatically know either is a usable button.
• Screen readers handle links slightly differently than they do buttons. Pressing the Space key triggers a button, but pressing the Enter key triggers a link.
• Alt text must be added for buttons using an image, such as a vendor logo, instead of a text label. The alt text should orient a user with a screen reader so they know what action the button. For example, the PayPal button alt text could read, "PayPal button to start the process to pay with your PayPal account."

Guidance

• Use sentence case for button labels.
• Use an active voice with a verb for the first word. Instead of “Subscription search” label the button “Find my subscription.”
• Benefit buttons are buttons with label that describes a benefit ($1 for 4 weeks) to help users make a choice.

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.

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.

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.

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.