# `PhiaUi.Components.IconButton`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/buttons/icon_button.ex#L1)

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} />

# `icon_button`

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.

---

*Consult [api-reference.md](api-reference.md) for complete listing*