Design

Buttons

Updated: Feb 26, 2026

Buttons are interactive elements users activate by targeting and selecting.

Usage

Buttons are interactive elements designed to initiate a specific action. They convey calls to action to the user through text, an 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 specify the action a button will perform. The label should be one word if possible, and as few words 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.

Secondary button
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
A 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 to 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.

Types

Button
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:

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.