Overview

Activation is the simplest and most commonly used menu item in the menu-button widget. It should be the default choice in most scenarios due to its straightforward nature. This simplicity makes it highly reliable, as it minimizes the risk of edge case semantic issues during the design process.

As a basic, clickable option, the Activation item triggers direct action directly changing page content without any additional layers or interactions (e.g., hierarchy or selection behavior). This item type should be favored whenever possible to maintain simplicity and alignment with accessibility standards.

---

Design

Box Model

Configurations

With Left Region

With Secondary Label

With All Configurations

This composable uses all the visual styles from the Standard Menu, and may also include any of the following according to the use case and requirements.

• Primary Text Label: "b2" (Typography Variant)
  The primary label by design is an opinionated configuration and has forced styling and alignment. It has a left placement of the text that grows to the right and is forced to wrap to accommodate additional labels that are displayed in full length.
• Left Agnostic Region
  The menu item can have an agnostic region on the left side of the menu item. It has pre-built spacing to dictate the proper distance between the primary label, but still within close proximity to maintain the relationship. This region can be used for a decorative element to provide better understanding of various actions to be taken.
• Secondary Text Label (Optional): "b4" (New Typography Variant)
  The secondary label by design is an optional opinionated configuration and has forced styling and alignment. It has a right placement of the text that grows to the left, and pre-built spacing to always maintain sufficient space between the primary label.
  The secondary label never wraps and is always displayed in it's full length to take as much space as it needs. This forces the primary label to wrap to accommodate it. Secondary labels should be used sparingly and only for text strings that are short and concise. Authors are in charge of ensuring the primary and secondary relationship through the display of content.

Responsive

This composable uses the Standard Menu responsive behavior.

States

Use Cases

Examples

Digital Accessibility

This composable has no known-of related A11y concerns.

---

Variants

This composable has no known-of variants.

---

Usage Warnings

This composable has no known-of usage warnings.

---

Reference

This composable has no known-of references.