Primitive

Button Demo

A compact action row that verifies the smallest installable registry item.

Source

This is the component source that shadcn installs into a consuming project.

registry/default/button-demo/button-demo.tsx

import { ArrowRightIcon, SparklesIcon } from "lucide-react"

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

type ButtonDemoProps = {
  primaryLabel?: string
  secondaryLabel?: string
}

export function ButtonDemo({
  primaryLabel = "Start with registry",
  secondaryLabel = "View source",
}: ButtonDemoProps) {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button>
        <SparklesIcon data-icon="inline-start" />
        {primaryLabel}
      </Button>
      <Button variant="outline">
        {secondaryLabel}
        <ArrowRightIcon data-icon="inline-end" />
      </Button>
    </div>
  )
}