Button

A modern, accessible, and theme-aware button component for all UI actions. Highly flexible with variants, sizes, and an integrated loader, it is perfect for forms, dialogs, toolbars, and anywhere you need a robust action element.

radien

Live Preview

Installation

You can install the Button component with the following CLI command, or copy the implementation manually:

typescript-icon
1npx shadcn@latest add http://localhost:3000/r/button.json

Import

To use the Button component, import it in your code:

typescript-icon
1import { Button } from '@/components/Button';

Props

The Button component accepts the following props:

PropTypeDefaultDescriptionRequired
variant'primary' | 'secondary' | 'gradient' | 'destructive''primary'Visual style of the button.No
size'sm' | 'md' | 'lg''md'Button size.No
loaderbooleanfalseShow a spinning loader icon at the start, for loading state.No
classNamestring-Additional utility classes for customizing the button styling.No
childrenReact.ReactNode-The content inside the button.Yes
onClick() => void-Callback fired when the button is clicked.No

Example usage

Basic usage

typescript-icon
1<Button onClick={() => alert('Clicked!')}>Click me</Button>

With loader (loading state)

typescript-icon
1<Button loader>Loading...</Button>

With variants

typescript-icon
1<>
2  <Button variant="primary">Primary</Button>
3  <Button variant="secondary">Secondary</Button>
4  <Button variant="gradient">Gradient</Button>
5  <Button variant="destructive">Destructive</Button>
6</>

With sizes

typescript-icon
1<>
2  <Button size="sm">Small</Button>
3  <Button size="md">Medium</Button>
4  <Button size="lg">Large</Button>
5</>

Features

  • Variants: Primary, secondary, gradient, and destructive for diverse UIs.
  • Sizes: Flexible sizing for small, medium, and large layouts.
  • Loader: Integrated spinner for async use-cases.
  • Theme-aware: Looks great in both light and dark modes.
  • Highly customizable: Add extra classes or extend the component easily.

Customization

  • Styling: Override or extend with the className prop or edit the Tailwind classes.
  • Default variant/sizing: Edit the defaultVariants in the source for a new default look.
  • Loader options: Swap the IconLoader2 for a custom loading spinner.

Troubleshooting

  • If the loader icon doesn't appear, ensure @tabler/icons-react is installed.
  • If styles differ from expected, check your Tailwind config or class overrides.