# Button

Buttons communicate to a user which action they are about to take. They should be able to hold links or trigger functions.

## Variations

There are four main types of button:

- [Primary](/components/detail/button--default)<br />`<button class="btn btn-primary">`
- [Secondary](/components/detail/button--secondary)<br />`<button class="btn btn-secondary">`
- [Simple](/components/detail/button--simple)<br />`<button class="btn btn-simple">`
- [Caution](/components/detail/button--caution)<br />`<button class="btn btn-caution">`

Any of these can be a standard size or a large size, and any can accommodate a loader, a disabled state, text with an icon, or an icon alone. By default, each size sets a height and padding on the left and right. You can override these values in context, or give the button a `.btn-full-width` class to make it span the width of its parent.