Correct and idiomatic ways to use the <mds-radial-menu-item> component, ordered from most common to most specialized. Patterns assume a working knowledge of the variant / tone ladders documented in agents/variants.md and the shared component rules in agents/conventions.md.

Basic Item with Icon and Tooltip

The canonical form. Always place <mds-radial-menu-item> as a direct child of <mds-radial-menu>. Set icon to a slug from the Magma icon library and tooltip to the label of the action - it doubles as the inner button’s accessible name.

<mds-radial-menu>
  <mds-radial-menu-item icon="mi/baseline/edit" tooltip="Modifica"></mds-radial-menu-item>
</mds-radial-menu>

Multiple Items Around the Arc

Add one <mds-radial-menu-item> per spoke. The parent assigns each item its angular position automatically; order in the DOM controls the arc sequence.

<mds-radial-menu opened>
  <mds-radial-menu-item icon="mi/baseline/edit"   tooltip="Modifica"></mds-radial-menu-item>
  <mds-radial-menu-item icon="mi/baseline/delete" tooltip="Elimina"></mds-radial-menu-item>
  <mds-radial-menu-item icon="mi/baseline/share"  tooltip="Condividi"></mds-radial-menu-item>
  <mds-radial-menu-item icon="mi/baseline/download" tooltip="Scarica"></mds-radial-menu-item>
</mds-radial-menu>

Variant and Tone for Emphasis

Use variant to convey the semantic meaning of the action and tone to control visual weight. The defaults (variant="dark" + tone="weak") keep spokes visually subordinate to the trigger button, which defaults to tone="strong". Override them only when the action demands a different signal.

<mds-radial-menu opened>
  <!-- Default: neutral dark spoke -->
  <mds-radial-menu-item icon="mi/baseline/share" tooltip="Condividi"></mds-radial-menu-item>

  <!-- Destructive action: error variant -->
  <mds-radial-menu-item
    icon="mi/baseline/delete"
    tooltip="Elimina"
    variant="error"
    tone="strong"
  ></mds-radial-menu-item>

  <!-- Primary call to action -->
  <mds-radial-menu-item
    icon="mi/baseline/save"
    tooltip="Salva"
    variant="primary"
    tone="strong"
  ></mds-radial-menu-item>
</mds-radial-menu>

Listening for Activation

<mds-radial-menu-item> emits no own events. Wire the native click event directly on the element - it bubbles from the inner <mds-button>.

<mds-radial-menu>
  <mds-radial-menu-item id="edit-item" icon="mi/baseline/edit" tooltip="Modifica"></mds-radial-menu-item>
</mds-radial-menu>

<script>
  document.querySelector('#edit-item').addEventListener('click', () => {
    console.log('Modifica attivato');
  });
</script>

Item Without a Tooltip (Unambiguous Icon)

Omit tooltip only when the icon is self-evident in context and the action is labelled elsewhere (for example, via a screen-reader landmark). Without tooltip, the inner button’s accessible name falls back to the icon name (add), which names the icon, not the action - reserve this for cases where the icon is genuinely unambiguous.

<mds-radial-menu opened>
  <mds-radial-menu-item icon="mi/baseline/add"></mds-radial-menu-item>
</mds-radial-menu>

Customizing Transition Timing

Use the two documented CSS custom properties to control how fast each spoke animates in and out. Set them on the item host or on a parent selector.

/* Slow, elastic entrance for a playful UI */
mds-radial-menu-item {
  --mds-radial-menu-item-transition-duration: 700ms;
  --mds-radial-menu-item-transition-timing-function: var(--ease-out-back);
}