Design
Buttons
Buttons are interactive elements users activate by targeting and selecting.
Resources
Download the Meta Horizon OS UI Set in Figma or Unity to start building with customizable, production-ready components.
Design | Open in Figma. Change themes for specific components or entire pages and customize elements to fit your design system. |
Implementation | Download the Meta Interaction SDK (Unity) to use the Meta horizon OS UI Set. Elements are customizable and support multiple input modalities. |
Usage
Buttons are interactive elements designed to initiate a specific action. They convey calls to action to the user via text, and icon, or both. The label on a button indicates the action that will be triggered upon user interaction.
Anatomy
These are the different parts, characteristics, and frequently used terminologies for buttons:
1. Background | There are 3 colors for buttons with a background: primary, secondary, and tertiary buttons. Borderless buttons don’t have a background. |
2. Icon | Icons can be used to provide extra clarity on the meaning of the action. In MR, icons should be filled rather than outlined for better legibility. |
3. Label | Button labels or button text specifies the action a button will perform. The label should be one word if possible, and as few as possible if not. It should clearly communicate the user's intended action. |
4. Hit target | Also known as a collision box, this invisible area around a button defines its interactive boundaries. It is typically larger than the button's visual representation to create a tolerance zone that accommodates potential user input imprecision due to input methods or user motor skills, thereby ensuring accurate activation by users. The minimum hit target size for direct touch is 48dp x 48dp. |
Variants
Button variants are designed to inform users about specific functions of a button through its visual appearance. To ensure proper communication of the intended actions, it is essential to maintain consistent implementation of these button variants throughout the experience.
Primary button
Used to convey the most common, recommended action, such as Done or Complete. People trust the primary button in Meta Horizon OS to be the most obvious, usually preferred choice when progressing through any intent.
Used to convey the most common, recommended action, such as Done or Complete. People trust the primary button in Meta Horizon OS to be the most obvious, usually preferred choice when progressing through any intent.
Secondary button
Use a secondary button for medium-emphasis action on a surface. Examples of when to use a secondary button might include:
Use a secondary button for medium-emphasis action on a surface. Examples of when to use a secondary button might include:
- Inverse actions: The inverse of the primary action, for example, to Remove a friend request.
- Continuation actions: Actions like See More.
- Supporting actions: Actions that support a primary action.
Borderless button
Borderless button doesn't have a background. Use it for less-frequent actions to maintain emphasis on other actions.
Borderless button doesn't have a background. Use it for less-frequent actions to maintain emphasis on other actions.
Destructive button
Used to draw the user's attention in a destructive action such as "Delete Account" or "End the Call". The red color is meant to give users pause before they take the action.
Used to draw the user's attention in a destructive action such as "Delete Account" or "End the Call". The red color is meant to give users pause before they take the action.
Destructive alt
Used to include a destructive action that isn’t the primary button.
Used to include a destructive action that isn’t the primary button.
Types
Button
The default button type.
The default button type.
Icon button
Icon buttons don't have a text label. Icon buttons share the same look and behavior with buttons. Icon button styles:
Icon buttons don't have a text label. Icon buttons share the same look and behavior with buttons. Icon button styles:
- Default - Circle shape
- Stretched - Pill shape
Text tile button
Text tile buttons have stacked layout, and can contain a button and a secondary text as optional elements. They have an active state when toggled on.
Text tile buttons have stacked layout, and can contain a button and a secondary text as optional elements. They have an active state when toggled on.
Button shelf
Button shelfs have a stacked layout. They have an active state when toggled on.
Button shelfs have a stacked layout. They have an active state when toggled on.
Specs
States
Default active state
All buttons have a default button state. This is the null-state of a button shown on screen. If the button is not available for interaction, then an inactive button state would exist. See below Inactive State.
All buttons have a default button state. This is the null-state of a button shown on screen. If the button is not available for interaction, then an inactive button state would exist. See below Inactive State.
Hover state
When a user is scanning over a button with their pointer, cursor, or any other input-object, the state is called hover. Buttons typically have a designed hover state, different from the default state, to indicate that a button is active and available to the user. This state also acts as a foreshadowing action and instantaneous UI feedback for a user, so they can press/interact with the button with confidence.
When a user is scanning over a button with their pointer, cursor, or any other input-object, the state is called hover. Buttons typically have a designed hover state, different from the default state, to indicate that a button is active and available to the user. This state also acts as a foreshadowing action and instantaneous UI feedback for a user, so they can press/interact with the button with confidence.
Pressed state
This state acts as instantaneous UI feedback to the user, so they can know they have interacted with a button element. It should be in effect however long users are pressing - a brief flash with a click, an extended state with a press-and-hold. This state is visually distinct from the default state and hover state.
This state acts as instantaneous UI feedback to the user, so they can know they have interacted with a button element. It should be in effect however long users are pressing - a brief flash with a click, an extended state with a press-and-hold. This state is visually distinct from the default state and hover state.
Disabled state
Disabled button states are used when a button is present but not available for use to the user. Examples of inactive buttons would be when a user needs to first perform a (or a set of an) action(s) before an inactive button becomes available. This state is typically communicated as less vibrant and therefore not interactive than a Default Active Button (above).
Disabled button states are used when a button is present but not available for use to the user. Examples of inactive buttons would be when a user needs to first perform a (or a set of an) action(s) before an inactive button becomes available. This state is typically communicated as less vibrant and therefore not interactive than a Default Active Button (above).
Did you find this page helpful?
Build with Meta
Virtual reality / Meta Horizon
Support and legal
Build with Meta
Virtual reality / Meta Horizon
Support and legal
Build with Meta
Virtual reality / Meta Horizon
Support and legal
English (US)
©2024 Meta