Skip to main content

Buttons

Buttons are interactive elements that trigger an action or an event.

Overview

Buttons express what action will occur when the user clicks or touches it. Buttons are used to initialize an action, either in the background or foreground of an experience.

Buttons have visual cues and affordances that help increase interaction confidence with users.

Since their “activator” (collider) is attached to the users’ index fingers, by default they react to the push action of the index finger of users. Buttons can be modified in their size, if the experience so requires. Pretty much like in real life, the larger the button, the greater the effort to pulse it, therefore as the button size increases, so does the position of the “activator” from the finger to the entire hand.

Far interaction works by default and the button can be triggered using Air Tap.

Usage

Use when

  • Affording interaction to key behaviors and features.
  • Confirming or submitting information entered into a form.
  • Cancelling and action, except when an unambiguous gesture is available.
  • Resetting a form or dataset.
  • Closing a container or section.
  • Opening a menu.
  • Moving forward or backward through a wizard-type workflow.
  • Creating an object within a group.
  • Applying a non-critical action to a dataset.

Don’t use when

  • Triggering navigation interactions, i.e. pan, orbit, zoom.
  • Initiating navigation, i.e. teleport.
  • Presenting the user with one or more high or medium-high actions specific to a task.

Types

Color Progression

Example Emphasis When to use
Primary Button High Use to draw attention to the primary action on a scene. There should be only one Primary Button on a UI at a time. Not all interfaces presented to users require a Primary Button.
Primary Button Medium - Light Used for secondary actions, establishing additional visual hierarchy on the scene.
Primary Button Medium - Dark Used for secondary actions, establishing additional visual hierarchy on the scene.

Form Progression

Form Example When to use
Round Round Buttons Transparent Use in-line or in “Button Groups”, when an interface requires many commands that are similar in size and hierarchy, and when there is limited UI space available. Recommended for radial menus.
Square Square Buttons Classic Use in-line or in “Button Groups”, when an interface requires many commands that are similar in size and hierarchy, and when there is limited UI space available.
Rectangular Rectangular Buttos Classic Primary use is for single actions that users can take. They can be used for options, but should be used judiciously not to disrupt visual hierarchy or functionality. Use in:
- Dialogs

- Modals

Functional Progression

Action Example When to use
Trigger Square Button Classic Trigger action on hit.
Select Selection Buttons Transparent Execute a selection.
- Radio = single selection

- Check = multiple selection

- Switch = turn on/off
Toggle Toggle Buttons Classic Trigger an action and/or update the display of information.
Last updated May 22, 2024.