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

Visually enhanced button variants for hero sections, landing pages, and
attention-grabbing CTAs.

Exports four components:

- `gradient_button/1` — multi-color gradient backgrounds
- `shimmer_button/1` — animated shimmer sweep effect
- `glow_button/1` — colored box-shadow glow ring
- `pulse_button/1` — animated ping ring around the button

## Notes

- `gradient_button` always uses `text-white` regardless of gradient — never
  uses `bg-clip-text` (this is a background gradient, not gradient text).
- `glow_button` applies `box-shadow` via inline `style` to avoid the cn/1
  shadow group conflict (same pattern as `liquid_glass`).
- `shimmer_button` uses inline `style` on the shimmer span to keep the
  animation out of the cn/1 bg group.
- `pulse_button` uses Tailwind's built-in `animate-ping` — no new keyframe
  is needed.

# `glow_button`

Renders a button with a colored glow ring via `box-shadow`.

The glow is applied via inline `style` to avoid cn/1 shadow group conflicts
(same pattern as `liquid_glass`). The border matches the glow color.

## Attributes

* `color` (`:atom`) - Glow color — sets border color and box-shadow hue. Defaults to `:primary`. Must be one of `:primary`, `:blue`, `:purple`, `:green`, `:red`, `:orange`, or `:pink`.
* `size` (`:atom`) - Defaults to `:default`. Must be one of `:sm`, `:default`, or `:lg`.
* `glow_intensity` (`:atom`) - Glow spread — :subtle, :normal, or :intense. Defaults to `:normal`. Must be one of `:subtle`, `:normal`, or `:intense`.
* `disabled` (`:boolean`) - Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required) - Button label.

# `gradient_button`

Renders a button with a gradient background.

The text color is always `text-white`. Gradient variants:

| Gradient      | Colors                        |
|---------------|-------------------------------|
| `:primary`    | primary → primary/70          |
| `:sunset`     | orange-500 → rose-500         |
| `:ocean`      | blue-500 → cyan-400           |
| `:forest`     | green-600 → emerald-400       |
| `:aurora`     | violet-500 → indigo-500       |
| `:monochrome` | gray-900 → gray-600           |

## Attributes

* `gradient` (`:atom`) - Gradient color preset. Defaults to `:primary`. Must be one of `:primary`, `:sunset`, `:ocean`, `:forest`, `:aurora`, or `:monochrome`.
* `size` (`:atom`) - Defaults to `:default`. Must be one of `:sm`, `:default`, or `:lg`.
* `disabled` (`:boolean`) - Defaults to `false`.
* `loading` (`:boolean`) - Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required) - Button label.
* `left_icon` - Icon rendered to the left of the label.
* `right_icon` - Icon rendered to the right of the label.

# `pulse_button`

Renders a button with an animated ping ring.

Uses Tailwind's built-in `animate-ping` — no custom keyframe needed.
The wrapper `<div>` is `relative inline-flex` to position the ping span.

## Attributes

* `color` (`:atom`) - Color of both the button and the ping ring. Defaults to `:primary`. Must be one of `:primary`, `:destructive`, `:success`, or `:warning`.
* `size` (`:atom`) - Defaults to `:default`. Must be one of `:sm`, `:default`, or `:lg`.
* `pulse` (`:boolean`) - When true, shows the animate-ping ring around the button. Defaults to `true`.
* `disabled` (`:boolean`) - Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required) - Button label.

# `shimmer_button`

Renders a button with an animated shimmer sweep.

The shimmer is a diagonal light pass animated with `phia-shimmer-pass`
(defined in `theme.css`). The animation is applied via inline `style` on
a `pointer-events-none` overlay span to avoid cn/1 bg-group conflicts.

## Attributes

* `variant` (`:atom`) - Button color — controls background and shimmer contrast. Defaults to `:dark`. Must be one of `:dark`, `:light`, or `:primary`.
* `size` (`:atom`) - Defaults to `:default`. Must be one of `:sm`, `:default`, or `:lg`.
* `disabled` (`:boolean`) - Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required) - Button label.

---

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