Button

A versatile and accessible button component with multiple variants, sizes, and states. Ideal for primary actions, secondary options, and loading indicators in forms and interfaces.

Default Usage

import { Button } from "@/components/ui/Button";

export const DefaultButtonExample = () => {
  return <Button>Default Button</Button>;
};

Variants

import { Button } from "@/components/ui/Button";

export const OutlineButtonExample = () => {
  return <Button variant="outline">Outline</Button>;
};

import { Button } from "@/components/ui/Button";

export const SecondaryButtonExample = () => {
  return <Button variant="secondary">Secondary</Button>;
};

import { Button } from "@/components/ui/Button";

export const GhostButtonExample = () => {
  return <Button variant="ghost">Ghost</Button>;
};

import { Button } from "@/components/ui/Button";

export const DestructiveButtonExample = () => {
  return <Button variant="destructive">Destructive</Button>;
};

import { Button } from "@/components/ui/Button";

export const LinkButtonExample = () => {
  return <Button variant="link">Link</Button>;
};

Sizes and Loading

import { Button } from "@/components/ui/Button";

export const SmallButtonExample = () => {
  return <Button size="sm">Small</Button>;
};

import { Button } from "@/components/ui/Button";

export const LargeButtonExample = () => {
  return <Button size="lg">Large</Button>;
};

import { Button } from "@/components/ui/Button";

export const LoadingButtonExample = () => {
  return <Button isLoading>Loading...</Button>;
};

Props

Features

• Multiple Variants: Supports default (primary blue), destructive (red), outline, secondary, ghost, and link styles for diverse use cases.
• Size Options: From compact ‘sm’ to prominent ‘lg’, including icon-only buttons.
• Loading State: Built-in spinner with Lucide React icon and automatic disabling.
• Accessibility: Semantic button element with proper disabled states and screen reader support.
• Customizable: Accepts className for easy overrides, just like shadcn.
• Dark Mode Support: Automatic theme adaptation with semantic Tailwind classes.
• Responsive: Scales well across devices with flexible sizing.

This button is most useful in forms for submit actions, in navigation for CTAs, or in dashboards for interactive elements where quick, professional interactions are needed.