---
title: Button
info: Buttons are clickable items used to perform an action.
---

## Usage

Buttons should be used in situations where users might need to:

* submit a form
* begin a new task
* trigger a new UI element to appear on the page
* specify a new or next step in a process

{% include pattern_block.html url='/src/patterns/components/button/link_button.html' %}

{% include pattern_block.html url='/src/patterns/components/button/neutral_button.html' %}

{% include pattern_block.html url='/src/patterns/components/button/outline_button.html' %}

Link, Neutral, and Outline Primary buttons can be used multiple times per feature. Use these buttons when the actions are of equal or secondary importance to the content surrounding it.

{% include pattern_block.html url='/src/patterns/components/button/primary_button.html' %}

The Primary button generally should only be used once per component screen at any one time. It is used for when there is an action that is clearly more important than the other actions and you need to draw attention to it. An example is when you have a “Save” and “Cancel” button. The “Save” is the primary action.

Not all features need to have primary actions, sometimes the actions are secondary to the content and are all of equal importance.

{% include pattern_block.html url='/src/patterns/components/button/block_button.html' %}

{% include pattern_block.html url='/src/patterns/components/button/inverse_button.html' %}

{% include pattern_block.html url='/src/patterns/components/button/destructive_button.html' %}

{% include pattern_block.html url='/src/patterns/components/button/outline_destructive_button.html' %}

{% include pattern_block.html url='/src/patterns/components/button/disabled_button.html' %}

{% include pattern_block.html url='/src/patterns/components/button/icon_button.html' %}

{% include pattern_block.html url='/src/patterns/components/button/icon_only_button.html' %}

{% include pattern_block.html url='/src/patterns/components/button/loading_button.html' %}

{% include pattern_block.html url='/src/patterns/components/button/checkbox_button.html' %}
