Button

Displays a button or a component that looks like a button. Supports multiple variants and sizes for different use cases.

Preview

Variants

Sizes

States

Usage

tsx
import { Button } from "zostel-ui";

<Button variant="default">Book Now</Button>
<Button variant="destructive">Cancel</Button>
<Button variant="outline">Details</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

{/* Sizes */}
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon"><PlusIcon /></Button>

Props

variant
Type: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
Default: "default"

The visual style variant of the button.

size
Type: "default" | "sm" | "lg" | "icon"
Default: "default"

The size of the button.

asChild
Type: boolean
Default: false

Render as a child element using Radix Slot.

disabled
Type: boolean
Default: false

Disables the button, preventing interaction.

className
Type: string
Default: ""

Additional CSS classes to apply.
Previous Theming Next Input