A button performs an action in response to an object or selection, whereas a link is a navigational element that connects two places.
- Use clear verbs for action names and keep them short to avoid clutter
- Generally the button size should match the size of any input filds grouped with the button, with the default size recommended in most cases.
- Large buttons are intended for calls to action, typically on a landing or sign in page.
- Small buttons are most appropriate for small containers or secondary panels where space is constrained.
- Do not use a small button exclusively to get more controls on the screen at once, as this can be overwhelming and increase cognitive load (https://en.wikipedia.org/wiki/Cognitive_load).
Base Button Styles
The style guides offer several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.
Primary Buttons
A primary button conveys the most common or significant action on the page or relevenat context. It is typically used to submit information or commit a change, e.g. "Save."
A Small Primary Button A Primary Button A Large Primary Button
- Generally there should only be one primary button in a given context (i.e., page, panel, task or step)
- Avoid using a primary button for actions in repeated contexts such as table rows, since multiple primary buttons will no longer communicate "primary."
Secondary Buttons
Use a secondary button for functions that are less significant than a primary button, or when there are multiple important actions with no clear "primary." There may be more than one secondary button.
A Small Secondary Button A Secondary Button A Large Secondary Button
Tertiary Buttons
Tertiary buttons represent functions that are lower priority than a secondary button and provide other available actions, e.g. "Cancel."
A Small Tertiary Button A Tertiary Button A Large Tertiary Button
Additional Buttons
Button sizes
Add .btn-lg or .btn-sm for additional sizes.
Button labels
Insert .btn-label class inside buttons and any icon inside it. Add .btn-label-right class if you want to put icon on right side.
Button group
Wrap a series of buttons with .btn in .btn-group.
In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate role attribute needs to be provided. For button groups, this would be role="group", while toolbars should have a role="toolbar".
In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use aria-label, but alternatives such as aria-labelledby can also be used.