Visually enhanced button variants for hero sections, landing pages, and attention-grabbing CTAs.
Exports four components:
gradient_button/1— multi-color gradient backgroundsshimmer_button/1— animated shimmer sweep effectglow_button/1— colored box-shadow glow ringpulse_button/1— animated ping ring around the button
Notes
gradient_buttonalways usestext-whiteregardless of gradient — never usesbg-clip-text(this is a background gradient, not gradient text).glow_buttonappliesbox-shadowvia inlinestyleto avoid the cn/1 shadow group conflict (same pattern asliquid_glass).shimmer_buttonuses inlinestyleon the shimmer span to keep the animation out of the cn/1 bg group.pulse_buttonuses Tailwind's built-inanimate-ping— no new keyframe is needed.
Summary
Functions
Renders a button with a colored glow ring via box-shadow.
Renders a button with a gradient background.
Renders a button with an animated ping ring.
Renders a button with an animated shimmer sweep.
Functions
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 tofalse.class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required) - Button label.
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 tofalse.loading(:boolean) - Defaults tofalse.class(:string) - Defaults tonil.- 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.
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 totrue.disabled(:boolean) - Defaults tofalse.class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required) - Button label.
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 tofalse.class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required) - Button label.