Buttons are used to provide a clear call to action. Their role is to provide immediate affordance for the next steps a user should take on a screen—whether it's to download a file, sign up for a demo, or save progress on a screen.
A button's job is to give someone a clear next step to engage in. Here are some key things to keep in mind when using them in your work:
Use clear and action-oriented labels
The label for a button should be concise, clear and action-oriented, e.g. "Save," "Sign Up," etc. Avoid unclear labels like "White Paper" or "Go."
Stick to the color themes
In Bolt, buttons change in appearance based on the theme they're contained within. These themes were designed intentionally to maximize affordance, legibility and clarity.
Avoid overusing buttons
The best use for a button is at the end of a form, or in a prominent area of the page such as a hero band. Avoid using too many buttons; if you need to include two calls to action in a single band, use a button group instead. If you have multiple calls to action on a page (e.g. a bunch of cards), default to a
text style button instead.
Below are some examples of common use cases for buttons.
Buttons in bands
When placed in a themed container (such as a band or a card), buttons are styled based on the container's theme, along with the type of button getting used (primary, secondary, text, etc).
When two buttons exist in the same band, the second button should be styled as a
secondary button. In bands, you can use a button group to create the styling by default.
When creating a layout that includes a number of calls to action, such as a trio of cards, use the
text style button instead of
secondary button styles to minimize cognitive overload.