Button

The Button component is one of the most fundamental components in the UI kit. It supports multiple variants, sizes, and states.

Props

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'destructive' \| 'ghost' \| 'link'`	`'primary'`	Visual style of the button
`size`	`'sm' \| 'base' \| 'lg'`	`'base'`	Button size
`icon`	`boolean`	`false`	Optimizes spacing for icon-only buttons
`asChild`	`boolean`	`false`	Render the button as a child component using `Slot`
...button props	`ComponentProps<'button'>`	-	All native button props are supported

Overview

Buttons are used to trigger actions or events, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.

Variants

The Button component supports different visual styles:

// Default primary button
<Button>Primary</Button>

// With click handler
<Button>
  Primary Action
</Button>

// Icon only
<Button icon aria-label="Primary action">
  <Plus className="size-4" />
</Button>

// Secondary button for alternative actions
<Button variant="secondary">Secondary</Button>

// Secondary with icon
<Button variant="secondary">
  <Plus className="size-4 mr-2" />
  Add Item
</Button>

// Icon only
<Button variant="secondary" icon aria-label="Add">
  <Plus className="size-4" />
</Button>

// Destructive button for dangerous actions
<Button variant="destructive">Destructive</Button>

// Delete action example
<Button variant="destructive">
  <Trash className="size-4 mr-2" />
  Delete
</Button>

// Icon only
<Button variant="destructive" icon aria-label="Delete">
  <Trash className="size-4" />
</Button>

// Ghost button for subtle actions
<Button variant="ghost">Ghost</Button>

// Ghost with icon only
<Button variant="ghost" icon>
  <Settings className="size-4" />
</Button>

Sizes

Choose from three different sizes:

// Small button for compact interfaces
<Button size="sm">Small</Button>

// Small with icon
<Button size="sm" variant="secondary">
  <Plus className="size-3 mr-1" />
  Add
</Button>

// Icon only
<Button size="sm" icon aria-label="Add">
  <Plus className="size-3" />
</Button>

// Default size button
<Button>Default</Button>

// Default with icon
<Button>
  <Save className="size-4 mr-2" />
  Save Changes
</Button>

// Icon only
<Button icon aria-label="Save">
  <Save className="size-4" />
</Button>

// Large button for prominent actions
<Button size="lg">Large</Button>

// Large call-to-action button
<Button size="lg" className="px-8">
  <ArrowRight className="size-5 mr-2" />
  Get Started
</Button>

// Icon only
<Button size="lg" icon aria-label="Get started">
  <ArrowRight className="size-5" />
</Button>

Icon Buttons

Use the icon attribute to optimize spacing for icon-only buttons:

// Icon-only buttons with different sizes
<Button icon size="sm" aria-label="Settings">
  <Settings className="size-3" />
</Button>

<Button icon aria-label="Search">
  <Search className="size-4" />
</Button>

<Button icon size="lg" aria-label="Add">
  <Plus className="size-5" />
</Button>

// Icon buttons with different variants
<Button icon variant="secondary" aria-label="Edit">
  <Edit className="size-4" />
</Button>

<Button icon variant="destructive" aria-label="Delete">
  <Trash2 className="size-4" />
</Button>

<Button icon variant="ghost" aria-label="More options">
  <MoreHorizontal className="size-4" />
</Button>

States

Buttons can be in different states:

// Disabled button
<Button disabled>Disabled</Button>

// Disabled with reason
<Button disabled title="Complete required fields first">
  <Lock className="size-4 mr-2" />
  Submit Form
</Button>

Types

interface ButtonProps extends ComponentProps<"button">, VariantProps<typeof buttonVariants> {
  asChild?: boolean;
  variant?: "primary" | "secondary" | "destructive" | "ghost" | "link";
  size?: "sm" | "md" | "lg";
  icon?: boolean;
}

Usage

import { Button } from '@vuer-ai/vuer-uikit';

function MyComponent() {
  return (
    <div>
      <Button>Primary Button</Button>
      <Button variant="secondary">Secondary Button</Button>
      <Button variant="destructive">Destructive Button</Button>
      <Button size="sm">Small Button</Button>
      <Button size="lg">Large Button</Button>
      <Button disabled>Disabled Button</Button>
    </div>
  );
}