Documentation and examples the button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more: Google AMP Buttons Library.
Buttons includes several predefined styles, each serving its own semantic purpose, with a few extras thrown in for more control.
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-link">Link</button>
Fancy larger or smaller buttons? Add .btn-sm
or .btn-lg
for additional sizes.
<button class="btn btn-sm btn-primary">Primary</button>
<button class="btn btn-sm btn-secondary">Secondary</button>
<button class="btn btn-sm btn-success">Success</button>
<button class="btn btn-sm btn-danger">Danger</button>
<button class="btn btn-sm btn-warning">Warning</button>
<button class="btn btn-sm btn-info">Info</button>
<button class="btn btn-sm btn-light">Light</button>
<button class="btn btn-sm btn-dark">Dark</button>
<button class="btn btn-lg btn-primary">Primary</button>
<button class="btn btn-lg btn-secondary">Secondary</button>
<button class="btn btn-lg btn-success">Success</button>
<button class="btn btn-lg btn-danger">Danger</button>
<button class="btn btn-lg btn-warning">Warning</button>
<button class="btn btn-lg btn-info">Info</button>
<button class="btn btn-lg btn-light">Light</button>
<button class="btn btn-lg btn-dark">Dark</button>
Replace the default modifier classes with the .btn-outline-*
ones to remove all background images and colors on any button.
<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-secondary">Secondary</button>
<button class="btn btn-outline-success">Success</button>
<button class="btn btn-outline-danger">Danger</button>
<button class="btn btn-outline-warning">Warning</button>
<button class="btn btn-outline-info">Info</button>
<button class="btn btn-outline-light">Light</button>
<button class="btn btn-outline-dark">Dark</button>
Create block level buttons those that span the full width of a parent by adding .btn-block
.
This works also with .btn-sm
or .btn-lg
and .btn-outline-*
.
<button class="btn btn-sm btn-block btn-primary">Primary</button>
<button class="btn btn-block btn-secondary">Secondary</button>
<button class="btn btn-block btn-success">Success</button>
<button class="btn btn-block btn-danger">Danger</button>
<button class="btn btn-block btn-warning">Warning</button>
<button class="btn btn-block btn-info">Info</button>
<button class="btn btn-block btn-light">Light</button>
<button class="btn btn-block btn-dark">Dark</button>
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. There’s no need to add a class to <button>
as they use a pseudo-class.
This works also with .btn-sm
or .btn-lg
and .btn-outline-*
.
<a href="#" title="..." class="btn btn-primary active">...</a>
Make buttons look inactive by adding the disabled boolean attribute to any <button>
element.
This works also with .btn-sm
or .btn-lg
and .btn-outline-*
.
<button class="btn btn-primary" disabled>Disabled button</button>
<a href="#" title="..." class="btn btn-primary disabled">Disabled link</a>
Group a series of buttons together on a single line with the button group. Wrap a series of buttons with .btn
in .btn-group
.
<div class="btn-group">
<button class="btn btn-primary">Left</button>
<button class="btn btn-primary">Middle</button>
<button class="btn btn-primary">Right</button>
</div>
Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
<div class="btn-toolbar">
<div class="btn-group mr-2" role="group">
<button class="btn btn-primary">1</button>
<button class="btn btn-primary">2</button>
<button class="btn btn-primary">3</button>
<button class="btn btn-primary">4</button>
</div>
<div class="btn-group mr-2">
<button class="btn btn-primary">5</button>
<button class="btn btn-primary">6</button>
<button class="btn btn-primary">7</button>
</div>
<div class="btn-group">
<button class="btn btn-primary">8</button>
<button class="btn btn-primary">9</button>
</div>
</div>