Button Component

The Button component is a flexible, highly customizable UI primitive built for SaaS applications. Perfect for React authentication UI, form builders, and SaaS dashboard interfaces. Built with Tailwind CSS for modern, responsive design. with TypeScript. It supports multiple variants, sizes, icon positioning, loading states, and full-width layout control — making it suitable for modern design systems and production apps.

Use iconBefore and iconAfter for icon placement,loading for async states, and variant + sizefor consistent design scaling across your UI.

Import Component From Library

javascript

1import { Button } from "@neuctra/ui";

Basic Usage Code

Start with a simple button. The component supports various variants, sizes, and states for different use cases.

1import { Button } from '@neuctra/ui';
2
3function BasicExample() {
4  return (
5    <Button onClick={() => console.log('Button clicked')}>
6      Click Me
7    </Button>
8  );
9}

Basic Example

Variants

Nine variants cover brand, neutral, semantic (status), and link-style actions — pick the one that matches the action's intent.

Props Table

All available props for the Button component.

Prop	Type	Default	Description
children	React.ReactNode	—	Content inside the button.
iconBefore	React.ReactNode	—	Icon displayed before the text.
iconAfter	React.ReactNode	—	Icon displayed after the text.
loading	boolean	false	Shows loader and disables button automatically.
loadingText	string	"Loading..."	Text shown while loading.
fullWidth	boolean	false	Makes button take full width.
variant	"default" \| "outline" \| "ghost" \| "secondary" \| "destructive" \| "success" \| "warning" \| "info" \| "link"	"default"	Controls visual style of the button. The four status variants (destructive, success, warning, info) map to the same theme tokens used by Alert and Callout; "link" is transparent with text-primary and underlines on hover, reading as a text link rather than a button.
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	"sm"	Controls padding, height, and font size.
className	string	—	Root button classes.
contentClassName	string	—	Wrapper around content.
textClassName	string	—	Text styling.
iconClassName	string	—	Icon styling.
loaderClassName	string	—	Loader spinner styling.
style	React.CSSProperties	—	Inline styles for button.
contentStyle	React.CSSProperties	—	Inline styles for content wrapper.
textStyle	React.CSSProperties	—	Inline styles for text.
iconStyle	React.CSSProperties	—	Inline styles for icons.
loaderStyle	React.CSSProperties	—	Inline styles for loader.
...rest	React.ButtonHTMLAttributes<HTMLButtonElement>	—	Native button props like onClick, type, disabled.

Common Mistakes

<Button size="15px" />

Only predefined sizes are allowed: xs, sm, md, lg, xl

<Button variant="rounded" />

Variant must be one of: default, outline, ghost, secondary, destructive, success, warning, info, link

<Button loading disabled={false} />

loading automatically disables the button

<Button className="w-full" />

Use className for layout instead of inline hacks

Pro Tips

Combine variant + size for consistent UI system design.
Use iconBefore for actions (like "Save") and iconAfter for navigation (like arrows).
loading automatically disables the button — no need to manually manage disabled.
Use fullWidth for forms, modals, and mobile layouts.
Prefer type="submit" only inside forms to avoid accidental submits.
Use className for layout control instead of inline styles.
Avoid excessive customization props — stick to variants for scalability.

Frequently Asked Questions

How do I install and import the Button component?

Install the @neuctra/ui package, then import it with: import { Button } from "@neuctra/ui";

What variants and sizes does Button support?

Button supports variants: default, outline, ghost, secondary, destructive, success, warning, info and sizes: xs, sm, md, lg, xl. Use the variant and size props to switch between them, or pass a className to layer on custom Tailwind CSS classes.

Is the Button component accessible?

Button is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.