An actions menu: a trigger button plus a role="menu" list of menuitems.

The hook provides roving tabindex focus, Home/End/arrow navigation, first-letter typeahead, Escape to close, and returns focus to the trigger. Items are buttons (application actions), never links.

Examples

<.menu label="Row actions">
  <:item on_click={JS.push("dup", value: %{id: @id})}>Duplicate</:item>
  <:item on_click={JS.push("archive", value: %{id: @id})}>Archive</:item>
  <:item destructive on_click={JS.push("delete", value: %{id: @id})}>Delete</:item>
</.menu>

Attributes

• id (:string) - Defaults to nil.
• label (:string) (required) - accessible name for the trigger button.
• placement (:string) - preferred placement; the hook flips it on collision. Defaults to "bottom-start". Must be one of "bottom-start", "bottom-end", "top-start", or "top-end".
• variant (:string) - Defaults to "secondary". Must be one of "primary", "secondary", "ghost", or "subtle".
• size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
• Global attributes are accepted.

Slots

• trigger - custom trigger content; defaults to the label text.
• item - a menu action (role=menuitem). Accepts attributes:
  • on_click (:any) - JS command or event fired when chosen.
  • disabled (:boolean)
  • destructive (:boolean) - styles the item as destructive.

A non-modal popover anchored to a trigger, using the native popover attribute as a progressive baseline (light-dismiss + top layer for free) and the hook for anchored positioning.

Focus behavior works for keyboard, touch, and mouse: opening moves focus into the panel when it holds controls, Escape and outside clicks close it, and focus returns to the trigger. Because it is non-modal the rest of the page stays interactive.

When not to use

For a required decision use AuroraUI.Components.Overlay.alert_dialog/1; for a short list of actions use menu/1; for a hint use tooltip/1.

Examples

<.popover label="Account">
  <:trigger><.avatar /></:trigger>
  <p>Signed in as jane@acme.com</p>
  <.button variant="ghost" phx-click="sign_out">Sign out</.button>
</.popover>

Attributes

• id (:string) - Defaults to nil.
• label (:string) (required) - accessible name for the trigger button.
• placement (:string) - preferred logical placement; the hook flips it on collision. Defaults to "bottom". Must be one of "top", "bottom", "start", or "end".
• variant (:string) - Defaults to "secondary". Must be one of "primary", "secondary", "ghost", or "subtle".
• size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
• Global attributes are accepted.

Slots

• trigger - custom trigger content; defaults to the label text.
• inner_block (required) - popover panel content.

A tooltip showing supplementary text on hover and keyboard focus.

The panel has role="tooltip" and is referenced from the trigger via aria-describedby, so assistive tech announces it as a description. The hook mirrors aria-describedby onto the focusable child, positions the tooltip, and hides it on Escape/blur.

When not to use

Never place required instructions, error text, or an interactive control's only accessible name in a tooltip — it is supplementary and can be missed by touch users.

Examples

<.tooltip text="Sync runs every 5 minutes">
  <.icon_button label="Sync info"><.info_icon /></.icon_button>
</.tooltip>

Attributes

• id (:string) - Defaults to nil.
• text (:string) (required) - supplementary text (not required instructions).
• placement (:string) - preferred placement; the hook flips it on collision. Defaults to "top". Must be one of "top", "bottom", "start", or "end".
• Global attributes are accepted.

Slots

• inner_block (required) - the trigger element (a focusable control).