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 Accent Inverse

<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="accent">Accent</button>
<button href="#" color="inverse">Inverse</button>

<xref href="#" outputclass="btn theme-primary">Primary</xref>
<xref href="#" outputclass="btn theme-secondary">Secondary</xref>
<xref href="#" outputclass="btn theme-success">Success</xref>
<xref href="#" outputclass="btn theme-danger">Danger</xref>
<xref href="#" outputclass="btn theme-warning">Warning</xref>
<xref href="#" outputclass="btn theme-info">Info</xref>
<xref href="#" outputclass="btn theme-accent">Accent</xref>
<xref href="#" outputclass="btn theme-inverse">Inverse</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="accent" outline="yes">Accent</button>
<button href="#" color="inverse" outline="yes">Inverse</button>

<xref href="#" outputclass="btn btn-outline theme-primary">Primary</xref>
<xref href="#" outputclass="btn-outline theme-secondary">Secondary</xref>
<xref href="#" outputclass="btn-outline theme-success">Success</xref>
<xref href="#" outputclass="btn-outline theme-danger">Danger</xref>
<xref href="#" outputclass="btn-outline theme-warning">Warning</xref>
<xref href="#" outputclass="btn-outline theme-info">Info</xref>
<xref href="#" outputclass="btn-outline theme-accent">Accent</xref>
<xref href="#" outputclass="btn-outline theme-inverse">Inverse</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 theme-primary btn-lg">Large button</xref>
<xref href="#" outputclass="btn theme-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 theme-primary btn-sm">Small button</xref>
<xref href="#" outputclass="btn theme-secondary btn-sm">Small button</xref>