Radial menu item<mds-radial-menu-item>Generated from @maggioli-design-system/magma@2.3.0dist/documentation.json. Encapsulation: shadow.
The first example of the Pattern page, live. Change its props below and the preview follows; Reset brings the example back as it was.
Props
sizeenumSpecifies the size of the menu item.
toneenumSpecifies the tone variant for the button
variantenumSpecifies the color variant for the button
iconstringThe icon displayed in the button
tooltipstringThe tooltip displayed when hovering over the button
Overview
The <mds-radial-menu-item> web component is a single actionable spoke of the <mds-radial-menu> compound. It wraps an <mds-button> (rendered as a circular icon button) plus an optional <mds-tooltip>, and is positioned along the menu arc by its parent.
Semantic Behavior
Compound child only: Must be a direct slot child of <mds-radial-menu>; it is not used standalone, and the radial menu’s item slot should contain only <mds-radial-menu-item> elements.Parent-driven sizing and ordering: The parent overrides each item’s size to match the menu and assigns its angular position, so an item’s size prop is effectively a fallback the menu normalizes.Open/close animation: Items are hidden until the parent menu is opened, then translate outward along the arc - the item itself carries no opened state.Conditional tooltip: An <mds-tooltip> is rendered only when tooltip is set.Accessibility: The tooltip string is also used as the inner button’s accessible name, so it doubles as the label of the icon-only action.No own events: Activation is the inner <mds-button>’s native click, which the consumer wires up directly on the element.
Properties & Visual Configurations
The shared variant / tone / size ladders are defined in agents/variants.md; they are forwarded to the inner <mds-button>. Defaults are deliberately distinct from a standalone button: variant defaults to dark and tone to weak so items read as secondary spokes against the parent’s trigger button (which defaults to the strong tone). Set icon to the glyph that represents the action - it is the primary content of each item since the label lives only in the tooltip. Use tooltip both to describe the action on hover and to supply the accessible name; omit it only when the icon is unambiguous and labelled elsewhere. Prefer leaving size unset and letting the parent menu drive it for visual consistency across all spokes.