Variants
One component, multiple visual styles
You can use the `variant` and `size` props to switch the button between polished defaults, outlines, ghost actions, destructive actions, and glass surfaces.
Actions
Buttons for primary actions
Action buttons with variants, sizes, and motion presets for React interfaces. Drop them into Next.js forms and toolbars while keeping focus rings consistent with your Tailwind theme.
Motion presets
Animation options through a prop
Pick a preset like `lift`, `press`, `glow`, `tilt`, or `bounce` to give each button a different feel without rewriting the component.
Button variants examples
Use Show output / Show code on each row. Snippets start with a Variant line naming the token row.
Appearance: DEFAULT
Appearance: SECONDARY
Appearance: OUTLINE
Appearance: GHOST
Appearance: DESTRUCTIVE
Appearance: GLASS
Appearance: EMERALD
Appearance: INDIGO
Appearance: PURPLE
Appearance: PINK
Appearance: ROSE
Appearance: SKY
Appearance: TEAL
Appearance: YELLOW
Appearance: ORANGE
Appearance: GRAY
Appearance: AMBER
Appearance: VIOLET
Appearance: GRADIENT-BLUE
Appearance: GRADIENT-GREEN
Appearance: GRADIENT-RED
Appearance: GRADIENT-YELLOW
Appearance: GRADIENT-PURPLE
Appearance: GRADIENT-TEAL
Appearance: GRADIENT-INDIGO
Appearance: GRADIENT-PINK
Appearance: GRADIENT-ORANGE
Animation: LIFT
Animation: PRESS
Animation: GLOW
Animation: TILT
Animation: BOUNCE
Animation: NONE
Size: SM
Size: MD
Size: LG
Size: XL
Size: 2XL
Size: 3XL
Size: 4XL
Size: 5XL
Size: 6XL
Size: 7XL
Size: 8XL
Size: 9XL
Size: 10XL
Size: ICON
What it does
Buttons wrap native elements so native disabled and focus behavior stay intact.
Loading states preserve width to avoid layout shift in toolbars.
Composition and API
Prefer compound subcomponents instead of one oversized prop bag. Export a small, documented API for your design system.
Pair every icon-only control with aria-label text supplied by your app.
Common use cases
- Submit Next.js forms with optimistic loading feedback.
- Drive modal and drawer footers with primary/secondary pairing.
- Add icon-leading actions to dense data tables.
- Gate destructive flows behind emphasized danger styles.
Accessibility
Keyboard order, focus rings, and ARIA attributes should match production usage. Test with your supported browsers and assistive technologies when semantics are non-trivial.
This preview page exposes a single h1 in the hero for a clean outline.
Next.js integration notes
Colocate examples under the App Router, keep server and client boundaries explicit, and avoid pulling interactive overlays into unexpected server layouts.
Set NEXT_PUBLIC_SITE_URL so canonical and Open Graph URLs resolve on deploy.
FAQ
Does the Button component work with Next.js App Router?
Yes. Import it like any other React component; keep interactive subtrees in client components when you need hooks or browser APIs, and leave static structure in server components where possible.
Can I customize button with Tailwind CSS?
Zentauri UI exposes class-friendly variants and slots so you can extend styles with Tailwind utilities without fighting inline styles.
Is this Button implementation accessible by default?
Primitives follow sensible defaults, but accessibility depends on how you label controls, manage focus, and wire keyboard handlers in your app. Validate critical flows with keyboard-only use and screen readers.