Buttons

Examples

Buttons allow users to make choices and take action. They are vital in creating a positive user experience. They help guide users towards their goals. Use buttons sparingly to direct the user's eye towards key actions on the page.

Turas offers several different button styles for use in various contexts.

Usage

Use buttons sparingly to direct the user's eye towards key actions on the page.

Do:

use sentence case for button labels
keep button labels short but meaningful
use unambiguous labels that clearly describe exactly what happens after the button is clicked
use a high contrast button for the most important action(s), for example, 'Primary', 'Success' and 'Danger'
order buttons by user action priority
use the first person when labelling, for example, 'My' rather than 'Your'

Avoid:

using an outline button on forms as it could be mistaken for an input
using a button for low priority actions where a simple hyperlink would suffice
giving the user too many different buttons to choose from
using secondary or default button style for primary actions

Primary Default Link Outline Success Danger

Copy


    <turas-button>Default</turas-button>

Copy


    <button class="btn btn-default " type="button">Default</button>

Hyperlink a tag

Primary Default Link Outline Success Danger

Copy


    <turas-button button-style="Primary" button-type="Hyperlink" href="/">Primary</turas-button>
    <turas-button button-style="Default" button-type="Hyperlink" href="/">Default</turas-button>
    <turas-button button-style="Link" button-type="Hyperlink" href="/">Link</turas-button>
    <turas-button button-style="Outline" button-type="Hyperlink" href="/">Outline</turas-button>
    <turas-button button-style="Success" button-type="Hyperlink" href="/">Success</turas-button>
    <turas-button button-style="Danger" button-type="Hyperlink" href="/">Danger</turas-button>

Copy


    <a href="/" class="btn btn-primary ">Primary</a>
    <a href="/" class="btn btn-default ">Default</a>
    <a href="/" class="btn btn-link ">Link</a>
    <a href="/" class="btn btn-outline ">Outline</a>
    <a href="/" class="btn btn-success ">Success</a>
    <a href="/" class="btn btn-danger ">Danger</a>

Type: button

Copy


    <turas-button button-style="Primary">Primary</turas-button>
    <turas-button button-style="Default">Default</turas-button>
    <turas-button button-style="Link">Link</turas-button>
    <turas-button button-style="Outline">Outline</turas-button>
    <turas-button button-style="Success">Success</turas-button>
    <turas-button button-style="Danger">Danger</turas-button>

Copy


    <button class="btn btn-primary " type="button">Primary</button>
    <button class="btn btn-default " type="button">Default</button>
    <button class="btn btn-link " type="button">Link</button>
    <button class="btn btn-outline " type="button">Outline</button>
    <button class="btn btn-success " type="button">Success</button>
    <button class="btn btn-danger " type="button">Danger</button>

Type: submit

Copy


    <turas-button button-style="Primary" button-type="Submit">Primary</turas-button>
    <turas-button button-style="Default" button-type="Submit">Default</turas-button>
    <turas-button button-style="Link" button-type="Submit">Link</turas-button>
    <turas-button button-style="Outline" button-type="Submit">Outline</turas-button>
    <turas-button button-style="Success" button-type="Submit">Success</turas-button>
    <turas-button button-style="Danger" button-type="Submit">Danger</turas-button>

Copy


    <button class="btn btn-primary " type="submit">Primary</button>
    <button class="btn btn-default " type="submit">Default</button>
    <button class="btn btn-link " type="submit">Link</button>
    <button class="btn btn-outline " type="submit">Outline</button>
    <button class="btn btn-success " type="submit">Success</button>
    <button class="btn btn-danger " type="submit">Danger</button>

Type: reset

Copy


    <turas-button button-style="Primary" button-type="Reset">Primary</turas-button>
    <turas-button button-style="Default" button-type="Reset">Default</turas-button>
    <turas-button button-style="Link" button-type="Reset">Link</turas-button>
    <turas-button button-style="Outline" button-type="Reset">Outline</turas-button>
    <turas-button button-style="Success" button-type="Reset">Success</turas-button>
    <turas-button button-style="Danger" button-type="Reset">Danger</turas-button>

Copy


    <button class="btn btn-primary " type="reset">Primary</button>
    <button class="btn btn-default " type="reset">Default</button>
    <button class="btn btn-link " type="reset">Link</button>
    <button class="btn btn-outline " type="reset">Outline</button>
    <button class="btn btn-success " type="reset">Success</button>
    <button class="btn btn-danger " type="reset">Danger</button>

Adding an icon

Copy


    <turas-button button-style="Primary" button-icon="fa fa-edit">Primary</turas-button>
    <turas-button button-style="Default" button-icon="fa fa-print">Print</turas-button>
    <turas-button button-style="Success" button-icon="fa fa-plus">Add activity</turas-button>
    <turas-button button-style="Danger" button-icon="fa fa-trash">Delete</turas-button>
    <turas-button button-style="Link" button-icon="fa fa-arrow-left">Back</turas-button>

Copy


    <button class="btn btn-primary " type="button"><span class="fa fa-edit" aria-hidden="true"></span>Primary</button>
    <button class="btn btn-default " type="button"><span class="fa fa-print" aria-hidden="true"></span>Print</button>
    <button class="btn btn-success " type="button"><span class="fa fa-plus" aria-hidden="true"></span>Add activity</button>
    <button class="btn btn-danger " type="button"><span class="fa fa-trash" aria-hidden="true"></span>Delete</button>
    <button class="btn btn-link " type="button"><span class="fa fa-arrow-left" aria-hidden="true"></span>Back</button>

Spinner

Copy


    <turas-button button-style="Primary" additional-classes="btn-spinner" disabled>Primary</turas-button>

Copy


    <button disabled class="btn btn-primary btn-spinner" type="button">Primary</button>

Optional parameters

button-style - Primary, Default, Link, Outline, Success, Danger, CloseForm, FormPrevious
button-type - Hyperlink, Submit, Reset
button-icon - The font awesome icon classes, for example: fa fa-edit
additional-classes - additional CSS classes
id - the HTML ID attribute
button-opens-modal-id open a modal with specific ID
button-closes-modal closes the modal
spinner-on-submit - Display a spinner inside the button if it was clicked to trigger a form submission. The spinner is only displayed if form submission is proceeding i.e. client validation has passed
text-on-submit - Display this text inside the button if it was clicked to trigger a form submission. The text is only displayed if form submission is proceeding i.e. client validation has passed.
spinner-on-click - Display a spinner inside the button when clicked. Use TurasDesignSystem.RestoreButton() to revert the button to its original state. If the button is a submit button within a FormButtonsContainer, use SpinnerOnSubmit instead.
text-on-click - Display this text inside the button when clicked. Use TurasDesignSystem.RestoreButton() to revert the button to its original state. If the button is a submit button within a FormButtonsContainer, use TextOnSubmit instead.on within a FormButtonsContainer, use TextOnSubmit instead.
block-multiple-clicks When the button is clicked, disables further clicks until the block-multiple-clicks attribute is reverted to "ready". Use TurasDesignSystem.RestoreButton() to revert the button to its original state. If the button is a submit button within a FormButtonsContainer, this is not needed.
block-form-submit When the button is clicked, disables submission of the parent form until the block-form-submit attribute is reverted to "ready". Use TurasDesignSystem.RestoreButton() to revert the button to its original state. If the button is a submit button within a FormButtonsContainer, this is not needed.

Accessibility status

This component is fully compliant with the WCAG 2.2 standard.

Testing

check keyboard navigation to ensure the button is in an expected tab order and doesn't cause a keyboard trap
check you can activate the button using return, space and enter keys
make sure keyboard focus is visible
test buttons with screen readers to ensure they are announced as expected

Developer considerations

make sure you use the proper HTML <button> tag as using a <DIV> or <Span> requires additional JavaScript to be WCAG compliant!

Breadcrumbs

Cards

Examples

Usage

Hyperlink a tag

Type: button

Type: submit

Type: reset

Adding an icon

Spinner

Optional parameters

Accessibility status

Testing

Developer considerations

Suggest a new component

Build accessible experiences

Research user journeys

Was this page helpful?