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.
- 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.
|Example||Emphasis||When to use|
|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.|
|Medium - Light||Used for secondary actions, establishing additional visual hierarchy on the scene.|
|Medium - Dark||Used for secondary actions, establishing additional visual hierarchy on the scene.|
|Form||Example||When to use|
|Round||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||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.|
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:
|Action||Example||When to use|
|Trigger||Trigger action on hit.|
Execute a selection.
- Radio = single selection
- Check = multiple selection
- Switch = turn on/off
|Toggle||Trigger an action and/or update the display of information.|