Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Example

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Primary Secondary Success Danger Warning Info Light Dark

<button href="#">Primary</button>
<button href="#" color="secondary">Secondary</button>
<button href="#" color="success">Success</button>
<button href="#" color="danger">Danger</button>
<button href="#" color="warning">Warning</button>
<button href="#" color="info">Info</button>
<button href="#" color="light">Light</button>
<button href="#" color="dark">Dark</button>

<xref href="#" outputclass="btn-primary">Primary</xref>
<xref href="#" outputclass="btn-secondary">Secondary</xref>
<xref href="#" outputclass="btn-success">Success</xref>
<xref href="#" outputclass="btn-danger">Danger</xref>
<xref href="#" outputclass="btn-warning">Warning</xref>
<xref href="#" outputclass="btn-info">Info</xref>
<xref href="#" outputclass="btn-light">Light</xref>
<xref href="#" outputclass="btn-dark">Dark</xref>

Outline buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the @outputclass and a value of btn-outline-* to remove all background images and colors on any button.

Primary Secondary Success Danger Warning Info Light Dark

<button href="#" outline="yes">Primary</button>
<button href="#" color="secondary" outline="yes">Secondary</button>
<button href="#" color="success" outline="yes">Success</button>
<button href="#" color="danger" outline="yes">Danger</button>
<button href="#" color="warning" outline="yes">Warning</button>
<button href="#" color="info" outline="yes">Info</button>
<button href="#" color="light" outline="yes">Light</button>
<button href="#" color="dark" outline="yes">Dark</button>

<xref href="#" outputclass="btn-outline-primary">Primary</xref>
<xref href="#" outputclass="btn-outline-secondary">Secondary</xref>
<xref href="#" outputclass="btn-outline-success">Success</xref>
<xref href="#" outputclass="btn-outline-danger">Danger</xref>
<xref href="#" outputclass="btn-outline-warning">Warning</xref>
<xref href="#" outputclass="btn-outline-info">Info</xref>
<xref href="#" outputclass="btn-outline-light">Light</xref>
<xref href="#" outputclass="btn-outline-dark">Dark</xref>

Sizing

Fancy larger or smaller buttons? Use @size="large" or @size="small" for additional sizes.

Large button Large button

<button href="#" size="large">Large button</button>
<button href="#" color="secondary" size="large">Large button</button>

<xref href="#" outputclass="btn-primary btn-lg">Large button</xref>
<xref href="#" outputclass="btn-secondary btn-lg">Large button</xref>

Small button Small button

<button href="#" size="small">Small button</button>
<button href="#" color="secondary" size="small">Small button</button>

<xref href="#" outputclass="btn-primary btn-sm">Small button</xref>
<xref href="#" outputclass="btn-secondary btn-sm">Small button</xref>