NexoreUIv1.8.6
InstallationComponents61IconsTemplatesNEWNexore MakeAI
Create ProjectSTUDIOGitHub
NexoreUI
61 comps
Create Project
Studio
Installation
Components Overview
60+
Icons
300+
Categories6 groups
Button
Input
Checkbox
AI
Select
AI
Switch
Slider
Rating
File Upload
Card
Accordion
Tabs
Table
Stepper
Scroll Area
Navigation
Dock
Data Display
Aurora Border Card
AI
Aurora Search Pill
AI
AI Prompt Input
AI
Command
Interactive Code Block
AI
Pro AI
AI
Theme: cyan
Studio
DocsButton

Button

Interactive button components with multiple variants and animations.

NextInput
On This Page
Quick Actions
Project Studio
New
Nexore Make (AI)Source on GitHub

Button

Interactive button components with multiple variants for every use case.

When to use which variant

defaultPrimary actions — Save, Submit, Continue
secondaryAlternative actions — Cancel, Back, Skip
destructiveIrreversible actions — Delete, Remove
outlineAlternative CTAs, secondary navigation
ghostQuiet in-context actions — Edit, View more
neon / glowHero sections, marketing CTAs
gradientPremium features, upgrade prompts
glassOn top of images, video players, overlays

Interactive Playground

Live CanvasInteractive
Controls(7)
variant
select

Visual style of the button

size
select

Size of the button

animate
boolean
Toggle state:

Enable hover/tap motion animation

shimmer
boolean
Toggle state:

Enable shimmer light effect

glow
boolean
Toggle state:

Enable neon glow effect

isLoading
boolean
Toggle state:

Show loading spinner

children
text

Button label text

Generated JSX
Source
import { Button } from "nexoreui"

<Button>
  Click Me
</Button>

Variants

Default

Primary actions: Submit, Save, Continue
component.tsx
1

Secondary

Alternative actions: Cancel, Back, Skip
component.tsx
1

Destructive

Irreversible actions: Delete, Remove, Reset
component.tsx
1

Outline

Alternative CTAs, secondary options
component.tsx
1

Ghost

Quiet actions: Edit, View more, inline links
component.tsx
1

Loading State

Form submissions, async operations
component.tsx
1

Neon / Glow

Hero sections, landing pages, key CTAs
component.tsx
1

Gradient

Marketing pages, premium feature CTAs
component.tsx
1

Glass

Overlays on images/videos, frosted UI panels
component.tsx
1

Interactive Hero Button

State-aware micro-interactions from the landing page
component.tsx
1

API Reference (Props)

PropTypeDefaultDescription
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.
animatebooleantrueEnables hover scale and press animations.
shimmerbooleanfalseRenders a sliding light shimmer beam animation.
glowbooleanfalseRenders a background neon shadow glow matching the theme color.
isLoadingbooleanfalseDisplays a loading spinner and disables user interaction.
classNamestring—Additional custom class names.

Accessibility (a11y)

  • Keyboard Navigation: Fully focusable using Tab, and triggers actions on Enter or Space.
  • Loading State: When isLoading is set, the button receives aria-busy="true" and is disabled, notifying screen readers of loading progress.