MStoreComponents
Live previewDocsBuy now

Buttons

—  Custom button styles for actions in forms, dialogs, etc.. See Bootstrap documentation.

Solid (default) buttons

<!-- Primary button -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Secondary button -->
<button type="button" class="btn btn-secondary">Secondary</button>

<!-- Success button -->
<button type="button" class="btn btn-success">Success</button>

<!-- Danger button -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Warning button -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Info button -->
<button type="button" class="btn btn-info">Info</button>

<!-- Light button -->
<button type="button" class="btn btn-light">Info</button>

<!-- Dark button -->
<button type="button" class="btn btn-dark">Dark</button>
// Primary button
button(type="button").btn.btn-primary
  | Primary

// Secondary button
button(type="button").btn.btn-secondary
  | Secondary

// Success button
button(type="button").btn.btn-success
  | Success

// Danger button
button(type="button").btn.btn-danger
  | Danger

// Warning button
button(type="button").btn.btn-warning
  | Warning

// Info button
button(type="button").btn.btn-info
  | Info

// Light button
button(type="button").btn.btn-light
  | Light

// Dark button
button(type="button").btn.btn-dark
  | Dark

Outline buttons

<!-- Primary button -->
<button type="button" class="btn btn-outline-primary">Primary</button>

<!-- Secondary button -->
<button type="button" class="btn btn-outline-secondary">Secondary</button>

<!-- Success button -->
<button type="button" class="btn btn-outline-success">Success</button>

<!-- Danger button -->
<button type="button" class="btn btn-outline-danger">Danger</button>

<!-- Warning button -->
<button type="button" class="btn btn-outline-warning">Warning</button>

<!-- Info button -->
<button type="button" class="btn btn-outline-info">Info</button>

<!-- Light button -->
<button type="button" class="btn btn-outline-light">Info</button>

<!-- Dark button -->
<button type="button" class="btn btn-outline-dark">Dark</button>
// Primary button
button(type="button").btn.btn-outline-primary
  | Primary

// Secondary button
button(type="button").btn.btn-outline-secondary
  | Secondary

// Success button
button(type="button").btn.btn-outline-success
  | Success

// Danger button
button(type="button").btn.btn-outline-danger
  | Danger

// Warning button
button(type="button").btn.btn-outline-warning
  | Warning

// Info button
button(type="button").btn.btn-outline-info
  | Info

// Light button
button(type="button").btn.btn-outline-light
  | Light

// Dark button
button(type="button").btn.btn-outline-dark
  | Dark

Rounded solid buttons

<!-- Primary button -->
<button type="button" class="btn btn-primary rounded">Primary</button>

<!-- Secondary button -->
<button type="button" class="btn btn-secondary rounded">Secondary</button>

<!-- Success button -->
<button type="button" class="btn btn-success rounded">Success</button>

<!-- Danger button -->
<button type="button" class="btn btn-danger rounded">Danger</button>

<!-- Warning button -->
<button type="button" class="btn btn-warning rounded">Warning</button>

<!-- Info button -->
<button type="button" class="btn btn-info rounded">Info</button>

<!-- Light button -->
<button type="button" class="btn btn-light rounded">Info</button>

<!-- Dark button -->
<button type="button" class="btn btn-dark rounded">Dark</button>
// Primary button
button(type="button").btn.btn-primary.rounded
  | Primary

// Secondary button
button(type="button").btn.btn-secondary.rounded
  | Secondary

// Success button
button(type="button").btn.btn-success.rounded
  | Success

// Danger button
button(type="button").btn.btn-danger.rounded
  | Danger

// Warning button
button(type="button").btn.btn-warning.rounded
  | Warning

// Info button
button(type="button").btn.btn-info.rounded
  | Info

// Light button
button(type="button").btn.btn-light.rounded
  | Light

// Dark button
button(type="button").btn.btn-dark.rounded
  | Dark

Rounded outline buttons

<!-- Primary button -->
<button type="button" class="btn btn-outline-primary rounded">Primary</button>

<!-- Secondary button -->
<button type="button" class="btn btn-outline-secondary rounded">Secondary</button>

<!-- Success button -->
<button type="button" class="btn btn-outline-success rounded">Success</button>

<!-- Danger button -->
<button type="button" class="btn btn-outline-danger rounded">Danger</button>

<!-- Warning button -->
<button type="button" class="btn btn-outline-warning rounded">Warning</button>

<!-- Info button -->
<button type="button" class="btn btn-outline-info rounded">Info</button>

<!-- Light button -->
<button type="button" class="btn btn-outline-light rounded">Info</button>

<!-- Dark button -->
<button type="button" class="btn btn-outline-dark rounded">Dark</button>
// Primary button
button(type="button").btn.btn-outline-primary.rounded
  | Primary

// Secondary button
button(type="button").btn.btn-outline-secondary.rounded
  | Secondary

// Success button
button(type="button").btn.btn-outline-success.rounded
  | Success

// Danger button
button(type="button").btn.btn-outline-danger.rounded
  | Danger

// Warning button
button(type="button").btn.btn-outline-warning.rounded
  | Warning

// Info button
button(type="button").btn.btn-outline-info.rounded
  | Info

// Light button
button(type="button").btn.btn-outline-light.rounded
  | Light

// Dark button
button(type="button").btn.btn-outline-dark.rounded
  | Dark

Pill solid buttons

<!-- Primary button -->
<button type="button" class="btn btn-pill btn-primary">Primary</button>

<!-- Secondary button -->
<button type="button" class="btn btn-pill btn-secondary">Secondary</button>

<!-- Success button -->
<button type="button" class="btn btn-pill btn-success">Success</button>

<!-- Danger button -->
<button type="button" class="btn btn-pill btn-danger">Danger</button>

<!-- Warning button -->
<button type="button" class="btn btn-pill btn-warning">Warning</button>

<!-- Info button -->
<button type="button" class="btn btn-pill btn-info">Info</button>

<!-- Light button -->
<button type="button" class="btn btn-pill btn-light">Info</button>

<!-- Dark button -->
<button type="button" class="btn btn-pill btn-dark">Dark</button>
// Primary button
button(type="button").btn.btn-pill.btn-primary
  | Primary

// Secondary button
button(type="button").btn.btn-pill.btn-secondary
  | Secondary

// Success button
button(type="button").btn.btn-pill.btn-success
  | Success

// Danger button
button(type="button").btn.btn-pill.btn-danger
  | Danger

// Warning button
button(type="button").btn.btn-pill.btn-warning
  | Warning

// Info button
button(type="button").btn.btn-pill.btn-info
  | Info

// Light button
button(type="button").btn.btn-pill.btn-light
  | Light

// Dark button
button(type="button").btn.btn-pill.btn-dark
  | Dark

Pill outline buttons

<!-- Primary button -->
<button type="button" class="btn btn-pill btn-outline-primary">Primary</button>

<!-- Secondary button -->
<button type="button" class="btn btn-pill btn-outline-secondary">Secondary</button>

<!-- Success button -->
<button type="button" class="btn btn-pill btn-outline-success">Success</button>

<!-- Danger button -->
<button type="button" class="btn btn-pill btn-outline-danger">Danger</button>

<!-- Warning button -->
<button type="button" class="btn btn-pill btn-outline-warning">Warning</button>

<!-- Info button -->
<button type="button" class="btn btn-pill btn-outline-info">Info</button>

<!-- Light button -->
<button type="button" class="btn btn-pill btn-outline-light">Info</button>

<!-- Dark button -->
<button type="button" class="btn btn-pill btn-outline-dark">Dark</button>
// Primary button
button(type="button").btn.btn-pill.btn-outline-primary
  | Primary

// Secondary button
button(type="button").btn.btn-pill.btn-outline-secondary
  | Secondary

// Success button
button(type="button").btn.btn-pill.btn-outline-success
  | Success

// Danger button
button(type="button").btn.btn-pill.btn-outline-danger
  | Danger

// Warning button
button(type="button").btn.btn-pill.btn-outline-warning
  | Warning

// Info button
button(type="button").btn.btn-pill.btn-outline-info
  | Info

// Light button
button(type="button").btn.btn-pill.btn-outline-light
  | Light

// Dark button
button(type="button").btn.btn-pill.btn-outline-dark
  | Dark

Sizes

<!-- Large solid button -->
<button type="button" class="btn btn-primary btn-lg">Large button</button>

<!-- Large outline button -->
<button type="button" class="btn btn-outline-primary btn-lg">Large button</button>

<!-- Large pill solid button -->
<button type="button" class="btn btn-pill btn-primary btn-lg">Large button</button>

<!-- Large pill outline button -->
<button type="button" class="btn btn-pill btn-outline-primary btn-lg">Large button</button>

<!-- Small solid button -->
<button type="button" class="btn btn-primary btn-sm">Large button</button>

<!-- Small outline button -->
<button type="button" class="btn btn-outline-primary btn-sm">Large button</button>

<!-- Small pill solid button -->
<button type="button" class="btn btn-pill btn-primary btn-sm">Large button</button>

<!-- Small pill outline button -->
<button type="button" class="btn btn-pill btn-outline-primary btn-sm">Large button</button>
// Large solid button
button(type='button').btn.btn-primary.btn-lg
  | Large button

// Large outline button
button(type='button').btn.btn-outline-primary.btn-lg
  | Large button

// Large pill solid button
button(type='button').btn.btn-pill.btn-primary.btn-lg
  | Large button

// Large pill outline button
button(type='button').btn.btn-pill.btn-outline-primary.btn-lg
  | Large button

// Small solid button
button(type='button').btn.btn-primary.btn-sm
  | Small button

// Small outline button
button(type='button').btn.btn-outline-primary.btn-sm
  | Small button

// Small pill solid button
button(type='button').btn.btn-pill.btn-primary.btn-sm
  | Small button

// Small pill outline button
button(type='button').btn.btn-pill.btn-outline-primary.btn-sm
  | Small button

Block level button

<!-- Solid block level button -->
<button type="button" class="btn btn-primary btn-block">Block level button</button>

<!-- Outline block level button -->
<button type="button" class="btn btn-outline-primary btn-block">Block level button</button>

<!-- Pill solid block level button -->
<button type="button" class="btn btn-pill btn-primary btn-block">Block level button</button>

<!-- Pill outline block level button -->
<button type="button" class="btn btn-pill btn-outline-primary btn-block">Block level button</button>
// Solid block level button
button(type='button').btn.btn-primary.btn-block
  | Block level button

// Outline block level button
button(type='button').btn.btn-outline-primary.btn-block
  | Block level button

// Pill solid block level button
button(type='button').btn.btn-pill.btn-primary.btn-block
  | Block level button

// Pill outline block level button
button(type='button').btn.btn-pill.btn-outline-primary.btn-block
  | Block level button

Active state

<!-- Active primary button -->
<a href="#" class="btn btn-primary active" role="button" aria-pressed="true">Primary button</a>

<!-- Active secondary button -->
<a href="#" class="btn btn-secondary active" role="button" aria-pressed="true">Secondary button</a>
// Active primary button
a(href="#", role="button", aria-pressed="true").btn.btn-primary.active
  | Primary button

// Active secondary button
a(href="#", role="button", aria-pressed="true").btn.btn-secondary.active
  | Secondary button

Disabled state

<!-- Disabled primary button -->
<a href="#" class="btn btn-primary disabled" role="button" aria-disabled="true">Primary button</a>

<!-- Disabled secondary button -->
<a href="#" class="btn btn-secondary disabled" role="button" aria-disabled="true">Secondary button</a>
// Disabled primary button
a(href="#", role="button", aria-disabled="true").btn.btn-primary.disabled
  | Primary button

// Disabled secondary button
a(href="#", role="button", aria-disabled="true").btn.btn-secondary.disabled
  | Secondary button