Button
Interactive button components with multiple variants and animations.
On This Page
Interactive button components with multiple variants and animations.
Interactive button components with multiple variants for every use case.
defaultPrimary actions — Save, Submit, ContinuesecondaryAlternative actions — Cancel, Back, SkipdestructiveIrreversible actions — Delete, RemoveoutlineAlternative CTAs, secondary navigationghostQuiet in-context actions — Edit, View moreneon / glowHero sections, marketing CTAsgradientPremium features, upgrade promptsglassOn top of images, video players, overlaysVisual style of the button
Size of the button
Enable hover/tap motion animation
Enable shimmer light effect
Enable neon glow effect
Show loading spinner
Button label text
import { Button } from "nexoreui"
<Button>
Click Me
</Button>| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | "premium" | "neon" | "glass" | "shimmer" | "gradient" | "glow" | "default" | Visual style variant of the button. |
| size | "default" | "sm" | "lg" | "icon" | "iconSquare" | "default" | Size dimensions of the button. |
| animate | boolean | true | Enables hover scale and press animations. |
| shimmer | boolean | false | Renders a sliding light shimmer beam animation. |
| glow | boolean | false | Renders a background neon shadow glow matching the theme color. |
| isLoading | boolean | false | Displays a loading spinner and disables user interaction. |
| className | string | — | Additional custom class names. |
isLoading is set, the button receives aria-busy="true" and is disabled, notifying screen readers of loading progress.