Buttons, or call-to-actions (CTAs) are used for important user actions

Active Buttons

Deactivated Buttons

Button sizes

Extra Small Buttons

Small Buttons

Default Buttons

Large Buttons

Button Group

Button Group - Sizing

Button Outlines

Button Outline Default

Disabled Button Outline Default

Button Outline Small

Button Outline Large

Button Outline Group

Button Outline Block

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

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.

Scroll to Top