Button

Component preview

The live preview for UI components is handled by components/atoms/codedocs/ComponentPreview.tsx. Use it directly inside MDX whenever you want a playground-style embed. Provide componentProps to set default values and propOptions to surface toggle-able props next to the preview.

Preview

Available props

Toggle to update the preview

Ghost variant

Preview the subtle secondary style

variant: "ghost"

Large size

Use on marketing pages where there is more room

size: "lg"

Disabled state

Communicate unavailable actions

disabled: true

Prop reference

Auto-generated from the component source

Button

className
variant
size
asChild = false

React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & { asChild?: boolean; }

Code

// owner: Sona
"use client";

import { Download, Sparkles } from "lucide-react";

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

export default function ButtonExample() {
  return (
    <div className="flex flex-wrap gap-3">
      <Button>Primary CTA</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
      <Button size="sm">Small</Button>
      <Button size="lg" className="gap-1">
        <Sparkles className="size-4" />
        Upgrade
      </Button>
      <Button disabled>Disabled</Button>
      <Button size="icon">
        <Download className="size-4" />
      </Button>
    </div>
  );
}

Button

Component preview

On this page

Command Palette