Buttons

Notes

  • use buttons to move though a transaction
  • aim to use only one button per page
  • button text should be short and describe the action the button performs

Start now button

Launch your service with a Start now button.

Disabled buttons

  • don’t disable buttons, unless there’s a good reason to
  • if you have to disable buttons, make sure they look like you can’t click them (use 50% opacity)
  • an example of a useful disabled option is a calendar with greyed out days where no bookings are available
  • provide another way for the user to continue, add an error message or text to explain why the button is disabled
<!-- Start: @buttons--default -->

<input class="button " type="submit" value="This is a default button">

<!-- End: @buttons--default -->

<!-- Start: @buttons--start -->

<a class="button button-start" href="" role="button">This is a start button</a>

<!-- End: @buttons--start -->

<!-- Start: @buttons--disabled -->

<input class="button " type="submit" value="This is a disabled button" disabled="disabled">

<!-- End: @buttons--disabled -->
 
{% if type == "link" %}
<a class="button {{ modifier }}{% if disabled %} disabled{% endif%}" href="{{ url }}" role="button">{{ text }}</a>
{% else %}
<input class="button {{ modifier }}" type="submit" value="{{ text }}"{% if disabled %} disabled="disabled"{% endif%}>
{% endif %}



{
  "@buttons--default": {
    "text": "This is a default button"
  },
  "@buttons--start": {
    "type": "link",
    "modifier": "button-start",
    "text": "This is a start button"
  },
  "@buttons--disabled": {
    "disabled": true,
    "text": "This is a disabled button"
  }
}