Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA radial menu that opens around a button: icon wedges at equal angles, pointer selection by angle, arrow-key stepping and the chosen label shown in the middle.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for a small set (3 to 8) of frequent actions on a canvas, map, card or media item, where angle-based selection is faster than a list. Use a dropdown menu for more actions, or when the actions need text to be understood.
PieRing is exported too: it is the ring without the button, used by PieMenuContext.
| Prop | Type | Default | Description |
|---|---|---|---|
items | { id; label; icon?; disabled?; destructive? }[] | - | The wedges, clockwise from the top. |
label | string | - | Names the menu; shown in the middle when no wedge is active. |
children | ReactElement<button> | - | The element that opens the menu. |
onSelect | (item) => void | - | Runs when a wedge is chosen. |
open / defaultOpen / onOpenChange | boolean | false | Controlled or initial open state. |
size / hole | number | 232 / 72 | Outer and inner diameter in pixels. |
The ring is a menu and each wedge a menuitem button with an aria-label. Wedges use roving tabindex; Tab closes the menu rather than moving through the ring. Clicking in the middle hole closes it. The pointer chooses by angle, so a wedge's whole sector is a target, not only its icon.