Buttons

We aim to keep all buttons across the app and web as consistent as possible. Implementations of buttons should follow the structure, hierarchy and design detailed below.

PRIMARY

This is used for the primary action taken on a page. Only one primary button must be present on a page. Use for booking, access or searching as well as call attention to an action on a form. In short to highlight the strongest call to action on a page. Every screen needs a primary button.

Standard
Hover

Active

Loading

PRIMARY DESTRUCTIVE

This is used if the primary action on the page is destructive, such as deleting an account or cancelling a booking. It is to be used in place of a standard primary button, not in addition.

Standard
Hover

Active

Loading

SECONDARY

This is used for secondary actions, when multiple actions are offered on a page. Try and limit the number of secondary buttons.

Standard
Hover

Active

Loading

SECONDARY SUBORDINATE

This is only to be used on mobile as secondary (but often negative) action. It should be placed centred to a primary action above it. For example, it could be used as "Cancel Booking" under a primary action of "Show Pass".

Standard
Hover

Active

Loading

SECONDARY DESTRUCTIVE

These work to call attention that the action is a destructive one. Whether it to be to cancel a booking or any task that will have a final and destructive state. It will always be displayed as the right most button in a row on desktop web, or the bottom most on mobile.

Standard
Hover

Active

Loading

Link Button

Text Link

These are used for links that navigate away from the current context of the page and should be placed away from the buttons above.

Standard
Hover

WRITING LABELS

Button labels are sentence case and are as short as possible, while clearly explaining what happens when the button is pressed. Aim for 3-5 words describing the action the button will perform.