Buttons can be used both on `<button>` and `<a>` elements.

## Button priority

Buttons in order of visual priority

- Action - most important, max of one per page
- Secondary action
- Default, solid button - limit number on a page to maintain visual impact
- Outline
- Text

## Icon buttons

An optional icon may be added to the left of the button text label. To add an icon add the `.sta-button--icon` class to the button and specify the icon to be used within the `data-icon` attribute, for example `data-icon="plus"`.

## Action buttons

There should only be a maximum of one action button per page. This is the only button that has the icon place to the right of the button text label.

## Secondary action buttons

These prominent buttons can be used alongside a single 'Action button' and also to draw attention to prominent links and calls to action within the content.

## Button size

A smaller sized button variant can be created by adding the `.sta-button--small` class. Action and Secondary Action buttons must not have their size changed.

## Theming options

Different colour themes can be applied to buttons to match the context they are being used in. Please consult the Digital Communications team before using alternate themes.