Solid

Button description test here

Outline

Outline (ghost) button description

Link

Link button description

Reversed

Reversed button description

Sizes

Sizes description

Block-level

Block-level description

Button Icons

Buttons with icons description

Disabled

Disabled description

Usage

Rule

What is the reason to use this…

Constraint

What are the limitations/boundaries…

Principle

Why do we use this…

Accessibility

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.

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.

Class Names

btn
Required

Apply to the element (<button>, <a> or <input>) that should behave like a 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 December 15, 2017
  • Authorable- Yes
  • Core: Button Styles