Button
An animated glowing-border Button component engineered with a spinning conic-gradient line tracking the 4 edges of the button, smooth click ripple physics, loading states, and full theme synchronization.
The glowing border animation continuously spins around the 4 sides of the button matching the form submitting engine animation.
4-Side Spinning Glowing Line Animated Button
- Feature
variant"outline" - renders a continuous spinning conic-gradient glowing line with solid white/black bg and hover theme fill.
Installation
New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @avara-ui registry once, then copy your styles from the Themes page.
Install Button
components/ is written into your project. Copy any snippet from a Usage tab above and it runs.
Install dependencies
Step 1 installs this for you. Run it yourself only if you are adding Button to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.
icons is a component, not a package — the shadcn CLI installs it as source files.
Examples
Dark Glass Parameter Control Panel Tiles
- Shards Control
variant"shards-control" - renders a dark glass control tile supporting
controlType='color' | 'select' | 'slider' | 'toggle'. - Effect
effect"sparkle" | "orbit" | "beacon" | "shimmer" - plays when the tile lands on something: a slider reaching full, a toggle switching on, or a new select / colour pick. Any tile can take any effect; the colour tile tints its effect with the picked colour.
- Mode
effectMode"once" | "continuous" onceplays a single time per landing;continuousloops while the tile stays active and fades out when it no longer is. Override when it counts as active witheffectActive. Skipped underprefers-reduced-motion.
Interactive Sliding Icon & Text Motion Variants
- Icon Expand
variant"expand-icon" - radial color expansion fills button from icon center.
- Icon Slide
variant"slide-icon" - rounded icon slides out to right while new icon enters from left.
- Icon Loop
variant"slide-icon-loop" - same rounded icon, but the arrow keeps travelling right and re-entering from the left on its own — no hover needed. Holds still under
prefers-reduced-motion. - 3D Press
variant"3d" - a raised face over a darker edge and a ground shadow; the face sinks toward the edge on hover and all the way down on press. Colours come from
--primary, so it follows the theme. - Background Wipe
variant"slide-bg" - background wipes horizontally from left to right.
- Text Roll Motion
variant"slide-text" | "slide-text-down" | "slide-text-bounce" - vertical text sliding and hero spring character bounce.
Pricing & Action CTA Buttons
- Primary
variant"pricing-primary" - clean solid primary theme button with subtle scale press physics.
- Dark Gradient
variant"pricing-dark" - high-contrast dark gradient button with white text matching Dot Matrix and Scale cards.
- Outline
variant"pricing-outline" - subtle card border with muted background hover effect.
- Glow Pro
variant"pricing-glow" - ambient theme-colored glow shadow for popular or enterprise tiers.
- Muted Flat
variant"pricing-muted" - flat muted card button commonly used for secondary or Contact Sales actions.
- Typographic Primary
variant"pricing-typographic" - featured primary typographic button with slide-up curtain effect and dual looping arrow motion.
- Typographic Muted
variant"pricing-typographic-muted" - muted typographic button with primary curtain slide-up on hover and dual looping arrow motion.
- Icon Toggle
showArrowtrue | false - toggles trailing arrow icon cleanly without extra boilerplate.
Features
- 4-Side Animated Glowing Border: Conic-gradient spinning line that continuously sweeps around the 4 edges of the button matching Form Engine submitting buttons.
- Interactive Sliding Icon Physics:
variant="slide-icon"provides a rounded background icon on the right that slides out to the right on hover, while a new rounded icon slides in smoothly from the left. - Looping Icon Motion:
variant="slide-icon-loop"keeps the same rounded icon on the right, but the arrow continuously exits to the right and re-enters from the left inside the circle, without any hover. - 3D Press:
variant="3d"stacks a raised primary face over a darkened edge and a soft ground shadow. Hover lowers the face a step; pressing seats it on the edge, so the click reads as a real push. - Vertical Text Roll Animation:
variant="slide-text"moves the button text smoothly upwards on hover while another text label rolls up smoothly into position from below. - Ripple Click Physics: Interactive radial ripple expansion on mouse click.
- Loading Spinners: Built-in async state handling with interactive disabled states.
- Full Theme Color Syncing: Automatically inherits site primary CSS variables (
var(--primary)).
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "outline" | "slide-icon" | "slide-icon-loop" | "slide-text" | "3d" | "shards-control" | "pricing-primary" | "pricing-dark" | "pricing-outline" | "pricing-glow" | "pricing-muted" | "pricing-typographic" | "pricing-typographic-muted" | ... | "outline" | Choose between 4-side border glow, sliding rounded icon, looping rounded icon, vertical text roll, raised 3D press, parameter control tiles, or pricing CTA surfaces ("pricing-primary", "pricing-dark", "pricing-outline", "pricing-glow", "pricing-muted", "pricing-typographic", "pricing-typographic-muted"). |
controlType | "color" | "select" | "slider" | "toggle" | "select" | Input type for variant="shards-control" (color picker, select dropdown, range slider, or toggle switch). |
label · value · options | string | number | string[] | — | Label title, active value, and option choices for control tiles. |
effect | "none" | "sparkle" | "orbit" | "beacon" | "shimmer" | undefined | Effect a control tile plays when a slider reaches full, a toggle switches on, or a select / colour pick changes. sparkle is a floor glow with twinkling specks, orbit runs two beams around the edge, beacon pings rings outward, shimmer wipes a bright band across. Unset keeps the built-in feedback (slider beacon at full, colour burst); "none" turns all of it off. |
effectMode | "once" | "continuous" | "once" | once plays a single time per change; continuous loops while the tile is active. |
effectActive | boolean | — | Forces a continuous effect on or off. By default it runs while the slider is full, the toggle is on, or once a select / colour tile has been picked. |
size | "default" | "sm" | "lg" | "default" | Controls the padding and height of the button. |
loading | boolean | false | If true, replaces the leading icon with a spinner and disables user interaction. |
iconLeft | React.ReactNode | undefined | Renders an icon or element to the left of the text. |
iconRight | React.ReactNode | undefined | Renders an icon or element to the right of the text. |
showArrow | boolean | false | If true, automatically displays an interactive trailing arrow icon ( ArrowRightIcon) without needing to supply iconRight. |