Solid buttons have three available styles and command the most visual weight. Note that “primary“ and “secondary“ denote styles and not hierarchy. In general, the primary and secondary solid buttons are at the top of the hierarchy when in the context of other buttons. Note: The default style is not currently available for authoring.

Examples

Outline (ghost) buttons provide less visual weight than solid buttons and pair well with them for secondary actions. Note that “primary“ and “secondary“ denote styles and not hierarchy. Outline buttons are at the middle level of button hierarchy.

Examples

Link buttons are for styling a button to look more like a link. They work well as alternate actions in a button action group, e.g. a solid button with “Continue“ for the label pairs well with a link button with “Cancel“ for its label as an alternate action. Link buttons are the lowest level of button hierarchy.

Examples

The reversed style provides the buttons with contrast against dark backgrounds.

Examples

There are four different button sizes that can be applied to any style of button; large, default, small and extra small

Examples

Block-level buttons span the full width of the parent container.

Examples

Buttons with icons have icons either before or after the label.

Examples

Disabled button styles are reserved for actions that cannot be taken within a given context.

Examples

Usage

Rules

  • As a general rule, buttons do, links go
  • Buttons are generally for the primary actions a user should take on the site like “Join” or “Log In,” while links should generally be used for navigating within the site
  • Buttons with equal visual weight (style) should not be placed next to each other as it conflicts with establishing a clear primary action
  • Button labels should be actionable—lead with verbs instead of nouns
  • Buttons should clearly indicate what will be the result of the action
  • Button style, size and placement should be used consistently throughout a site
  • Use title-case for button labels
  • Do not use different size buttons in the same context, e.g. a large primary button next to a default secondary button

Constraints

  • Button labels should be short, between 1–3 words—labels do not wrap
  • Text and icons (icon font or SVG) are the only content that can be within a button, text and icons are always one color within the button
  • Limit the number of buttons per page. If multiple buttons are used on a page consider using the available classes to visually decrease the weight per heirarchy.

Principle

  • Buttons provide users with quick visual emphasis for primary actions

Accessibility

  • Button labels should be written in a way that makes it clear what action the user is taking. If additional clarity is needed consider using text within a .sr-only <span> or with aria-label.
  • Buttons must have a visible focus state
  • When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers

Class Names

btn
Required

Apply to the element (<button>, <a> or <input>) that should behave like a button. This will create a basic, default button.
btn-primary
Modifier

Add to the btn element to style the button with the primary color as the solid background
btn-secondary
Modifier

Add to the btn element to style the button with the secondary color as the solid background
btn-primary-outline
Modifier

Add to the btn element to style the button with the primary color as the border and label color
btn-secondary-outline
Modifier

Add to the btn element to style the button with the primary color as the border and label color
btn-link
Modifier

Add to the btn element to style the button as a link. The color will match the default link color.
btn-link-simple
Modifier

Add to the btn element to style the button as a link with no padding. The color will match the default link color.
btn-reversed
Modifier

Add to the btn element to style the button with a solid white background and dark label
btn-reversed-outline
Modifier

Add to the btn element to style the button with a white border and label color
btn-lg
Modifier

Add to the btn element to increase the size of the button shape and label
btn-sm
Modifier

Add to the btn element to decrease the size of the button shape and label
btn-xs
Modifier

Add to the btn element to decrease the size of the button shape and label (Label is the same size as .btn-sm)
btn-block
Modifier

Add to the btn element to convert the button to a block-level element that spans the full width of its parent
btn-block-sm
Modifier

Add to the btn element to convert the button to a block-level element that spans the full width of its parent at the XS–SM breakpoints
disabled
Modifier

Add to the btn element (<a> or <input>) for the inactive button style. For the actual <button> element you can use the boolean disabled attribute.
btn-icon-text
Modifier

When using an icon within a btn (not recommended), surround the text portion of the label with this class so that consistent spacing is added between the label text and the icon. You do not need to manually add a space between the icon and text. Note, when using icons in the button you‘ll likely want to add aria-hidden="true" to the icon so that it isn‘t visible to assistive technology.
  • Last updated May 15, 2018
  • Authorable - Yes (with the exception of the new default button style)
  • Button Styles