Button

Clickable button with multiple variants and sizes.

Install

npx @beaket/ui add button

Import

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

Examples

Variants

 
export const AllVariants = () => (
  <div className="flex flex-wrap gap-2">
    <Button variant="primary">Primary</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>
    <Button variant="success">Success</Button>
    <Button variant="stark">Stark</Button>
    <Button variant="warning">Warning</Button>
  </div>
);

Sizes

 
export const AllSizes = () => (
  <div className="flex items-center gap-2">
    <Button size="sm">Small</Button>
    <Button size="md">Medium</Button>
    <Button size="lg">Large</Button>
    <Button size="icon">+</Button>
  </div>
);

States

 
export const AllStates = () => (
  <div className="flex gap-2">
    <Button disabled>Disabled</Button>
    <Button loading>Loading</Button>
  </div>
);

Props

NameTypeDefaultDescription
variantundefined | primary | destructive | outline | secondary | ghost | link | success | stark | warning—primary | secondary | destructive | outline | ghost | link | success | stark | warning. Button style variant
sizeundefined | sm | md | lg | iconmdsm | md | lg | icon. Button size
loadingboolean | undefined—Shows a loading spinner and disables the button
monoboolean | undefinedfalseUse monospace font for CTA-style text
asChildboolean | undefinedfalseMerges props onto the immediate child element instead of rendering a button