NexoreUI
InstallationComponentsNexore MakeGitHub
GitHub
NexoreUIv0.1.2

Getting Started

Installation

Components

ButtonInputCardBadgeAlertAvatarAccordionModal / DialogTooltipTabsProgressSkeletonSliderSwitchRatingCommandTableStepperScroll AreaFile UploadNavigationIconsDock

Pro

ChartsData DisplayDark Mode ToolkitCommerceCookie ConsentSocialPremium EffectsLoaders

Animated

MarqueeNumber TickerAnimated NumberTyping AnimationBlur FadeBox RevealFile Preview CardImage Compare
MIT License
DocsButton

Button

Interactive button components with multiple variants and animations.

Next ComponentInput

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

Button Playground
nexoreui
Live Preview
Props Panel
select

Visual style of the button

select

Size of the button

boolean

Enable hover/tap motion animation

boolean

Enable shimmer light effect

boolean

Enable neon glow effect

boolean

Show loading spinner

text

Button label text

Generated Code
Open in GitHub
import { Button } from "nexoreui"

<Button>
  Click Me
</Button>

Variants

Default

Primary actions: Submit, Save, Continue
component.tsx

Secondary

Alternative actions: Cancel, Back, Skip
component.tsx

Destructive

Irreversible actions: Delete, Remove, Reset
component.tsx

Outline

Alternative CTAs, secondary options
component.tsx

Ghost

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

Loading State

Form submissions, async operations
component.tsx

Neon / Glow

Hero sections, landing pages, key CTAs
component.tsx

Gradient

Marketing pages, premium feature CTAs
component.tsx

Glass

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

Interactive Hero Button

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

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.