---
component: Button
collection: 
    - component
    - action
---

# Buttons

## Why and When to Use

Buttons are meant for users to take some form of action. These actions may be to create, edit, delete, submit, etc.

### Buttons vs. Links(Anchors)

Buttons should be used as a form of action for the user to accomplish something.  Links(Anchors) should be used as a form of action for the user to go somewhere.

*Example: A user needs to leave a comment which requires going to a new page with a form. The user will navigate to that page by clicking a link, once the user has filled out the form they will be able to submit their comment using a button.*

## How to Use

There are two markup versions for buttons each with a time and place for use.

Button Tag Version
Buttons should be used as a form of action for the user to accomplish something.

Anchor Tag Version
Anchors should be used as a form of action for the user to go somewhere.

NEEDS:

1. anchor tags require an href value
1. anchor buttons need aria-label value if the text content of the link doesn't clearly represent where the user will go after clicking the link

```HTML
    <!-- Button Tag Version -->
    <button>Default</button>
    <button class="button--primary">Primary</button>
    <button data-disabled="true" aria-disabled="true">Disabled</button>
    <button class="button--positive">Postiive</button>
    <button class="button--negative">Negative</button>
    <!-- Anchor Tag Version -->
    <a href="" class="button" aria-label="">Default</a>
    <a href="" class="button--primary" aria-label="">Primary</a>
    <a href="" class="button" data-disabled="true" aria-disabled="true" aria-label="">Disabled</a>
    <a href="" class="button--positive" aria-label="">Positive</a>
    <a href="" class="button--negative" aria-label="">Negative</a>
```