Buttons help our travellers make all kinds of action, from logging in to booking that dream trip.

Supernovaa Buttons lead


Buttons Anatomy

Target area

The target area is the base tappable area of the button.


The label is the copy on the button. It’s usually the action that’s performed once selected.

Leading and trailing icons (optional)

These optional icons come before or after the label copy. Go to usage for content guidance.


Buttons All Styles Primaries simple

Primary buttons

Use primary buttons to show the key action on a page or view. Most pages should only have one primary action (excluding search results where multiple primary buttons can be used).

Within an entire screen, featured buttons should be used sparingly. If you have one critical button in your flow, consider using this for the most emphasis.

Secondary buttons

Use secondary buttons next to primary buttons to indicate alternative or less pronounced actions.

Text buttons, or links, are subtle in their appearance and should be used for supplementary action. They’re used for communicating non-destructive actions that a user can carry out. For example, to show more results on a listing page. Like all other button styles, these are available in two sizes and have hover, active and disabled states.

Destructive buttons

Destructive buttons are used to remove things or for irreversible actions. These buttons require an opt-in checkbox or a confirmation modal before the action is done. For example, a button that permanently closes an account.

Buttons All Styles Secondaries simple

Primary on dark

These are solid-fill buttons that work on dark images.

Primary on light

These are solid-fill buttons that work on light images. For example, a button on a map.

Secondary on dark

These have less emphasis than primary on dark. They work well for solid dark backgrounds.

These have less emphasis than hyperlinks. They work well for solid dark backgrounds.


Buttons come in two sizes: default and large. Note that the radius, typography, and spacing are the same, only the height differs.

Buttons Sizes

Default size

The default size is the standard size for buttons everywhere across our platforms

Large size

Large buttons are used sparingly across our product. They may be used for page components that demand attention, such as the search bar on the homepage.


We always use 8px radius corners regardless of size or style.

Buttons Radius


Buttons States Larger


The default state is the resting state of the button.


The hover state indicates that interaction is available for people using pointer devices.


The loading state communicates a button has been pressed and something is in progress.

Note: The button is disabled from further interaction until either the action has been completed, or the action failed to complete.


The disabled state indicates that an action can’t be taken until a previous action is completed.