Buttons
Styled links that attract users' attention and enable actions.
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
<turas-button>Default</turas-button>
<button class="btn btn-default " type="button">Default</button>
Hyperlink a tag
Primary Default Link Outline Success Danger
<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>
<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
<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>
<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
<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>
<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
<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>
<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
<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>
<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
<turas-button button-style="Primary" additional-classes="btn-spinner" disabled>Primary</turas-button>
<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!
