Pattern Library



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.





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 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.


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.


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.


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 element or adding .disabled to any element.

Transparent Button


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.