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
2. 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

    <!-- 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>