Button

Buttons are for actions. People expect buttons to do an action and links to navigate to another page.

When to use

Use buttons for actions like search, request, or delete. Use links for navigation from one page to another.

Use button types to create a hierarchy that guides people toward the most important actions.

Default buttons should make up most of the page. Too many accent, success, or attention type buttons make it harder for people to focus.

Use .pl-button for most actions on the page. It tells people this is not the main focus.

<div class="pl-margin-m">
  <button class="pl-button">Okay</button>
</div>

Use .pl-button--accent for the main action on the page. It tells people "start here."

<div class="pl-margin-m">
  <button class="pl-button pl-button--accent">Find it</button>
</div>

Use .pl-button--success for actions that complete a task, like placing a request or saving a change.

<div class="pl-margin-m">
  <button class="pl-button pl-button--success">Request an item</button>
</div>

Use .pl-button--attention for actions that are hard to undo, like deleting or canceling something.

<div class="pl-margin-m">
  <button class="pl-button pl-button--attention">Delete</button>
</div>

Keep labels short and start with a verb that describes what happens when people select the button.