Button

The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.

Usage

<script>
  import { Button } from "$lib/components/ui/button";
</script>

<Button>Click me</Button>

Examples

API Reference

Button Properties

Property	Type	Default	Description
variant	"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"	"default"	The visual variant of the button.
size	"default" \| "sm" \| "lg" \| "icon"	"default"	The size of the button.
disabled	boolean	false	Whether the button is disabled.
class	string	-	Additional CSS classes to add to the button.

Implementation

The Button component uses tailwind-variants for styling and provides a flexible API for customization.

// Implementation details from button.svelte
const buttonVariants = tv({
  base: "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  variants: {
    variant: {
      default: "bg-primary text-primary-foreground hover:bg-primary/90",
      destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
      outline: "border border-input hover:bg-accent hover:text-accent-foreground",
      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
      ghost: "hover:bg-accent hover:text-accent-foreground",
      link: "text-primary underline-offset-4 hover:underline"
    },
    size: {
      default: "h-10 px-4 py-2",
      sm: "h-9 rounded-md px-3",
      lg: "h-11 rounded-md px-8",
      icon: "h-10 w-10"
    }
  },
  defaultVariants: {
    variant: "default",
    size: "default"
  }
});