Buttons

Trigger actions and navigate through your dashboard.

Overview

The Button component is a versatile element used for various user interactions. It supports multiple variants, sizes, and states.

Usage

import { Button } from '@/components/ui/button';

export function MyComponent() {
  return (
    <div className="flex gap-4">
      <Button variant="default">Default</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
    </div>
  );
}

Variants

• default: The primary action button.
• secondary: For less prominent actions.
• destructive: For actions that delete or remove data.
• outline: A button with a border and no background.
• ghost: A button with no background or border until hovered.
• link: A button that looks like a text link.

Sizes

• default: The standard button size.
• sm: A smaller button for tight spaces.
• lg: A larger button for prominent actions.
• icon: A square button for icons.

States

• Loading: Use the loading prop to show a spinner and disable the button.
• Disabled: Use the disabled prop to prevent user interaction.

Best Practices

• ✅ Do this: Use the default variant for the most important action on a page.
• ✅ Do this: Use the destructive variant for actions that cannot be undone.
• ❌ Don't do this: Use too many different button styles on a single page; it can be distracting.