PhiaUi.Components.IconButton (phia_ui v0.1.17)

Icon-only button with a required accessible label and an optional CSS tooltip.

Enforces label as a required attribute to ensure every icon-only button is accessible by default. The same string is used as aria-label on the button and as tooltip text shown on hover.

Variants

Variant	Use case
`:ghost`	Default — toolbar / icon actions
`:default`	Filled primary icon button
`:destructive`	Dangerous icon action
`:outline`	Bordered icon button
`:secondary`	Lower-emphasis icon button

Sizes

Size	Dimensions
`:xs`	h-6 w-6
`:sm`	h-8 w-8
`:default`	h-9 w-9
`:lg`	h-11 w-11

Example

<.icon_button icon="trash-2" label="Delete" phx-click="delete" />

<.icon_button icon="settings" label="Settings" variant={:outline} size={:lg} />

<.icon_button icon="plus" label="Add item" shape={:circle} />

<.icon_button icon="x" label="Close" tooltip={false} />

Summary

Functions

icon_button(assigns)

Renders an icon-only button with an accessible label.

Functions

icon_button(assigns)

Renders an icon-only button with an accessible label.

When tooltip={true} (the default), a CSS tooltip is shown above the button on hover using group-hover:opacity-100. No JS hook is required.

When loading={true}, an animated spinner replaces the icon and aria-busy="true" is set on the button.

Attributes

icon (:string) (required) - Lucide icon name to render inside the button.
label (:string) (required) - Accessible label — used as aria-label and, when tooltip=true, as tooltip text.
variant (:atom) - Visual style variant. Defaults to :ghost. Must be one of :default, :destructive, :outline, :secondary, or :ghost.
size (:atom) - Button and icon size. Defaults to :default. Must be one of :xs, :sm, :default, or :lg.
shape (:atom) - Corner radius — :square uses rounded-md, :circle uses rounded-full. Defaults to :square. Must be one of :square, or :circle.
tooltip (:boolean) - Show a CSS-only tooltip on hover (uses group-hover, no JS hook required). Defaults to true.
disabled (:boolean) - Defaults to false.
loading (:boolean) - Defaults to false.
class (:string) - Defaults to nil.
Global attributes are accepted.