Button

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

export function ButtonDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button>Default</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="link">Link</Button>
    </div>
  )
}

import {
  ArrowRightIcon,
  ChevronDownIcon,
  RocketIcon,
  ShuffleIcon,
  Trash2Icon,
} from "lucide-react"

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

export function ButtonWithIcon() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button variant="secondary">
        <ShuffleIcon data-icon="inline-start" />
        Shuffle
      </Button>
      <Button>
        <RocketIcon data-icon="inline-start" />
        Launch campaign
      </Button>
      <Button variant="ghost">
        Auto
        <ChevronDownIcon data-icon="inline-end" />
      </Button>
      <Button variant="outline">
        Continue
        <ArrowRightIcon data-icon="inline-end" />
      </Button>
      <Button variant="destructive">
        <Trash2Icon data-icon="inline-start" />
        Delete
      </Button>
    </div>
  )
}

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

export function ButtonSizes() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button size="xs" variant="secondary">
        Extra small
      </Button>
      <Button size="sm" variant="secondary">
        Small
      </Button>
      <Button variant="secondary">Default</Button>
      <Button size="lg" variant="secondary">
        Large
      </Button>
      <Button size="sm">Upgrade</Button>
    </div>
  )
}

import { ArrowUpIcon, MicIcon, PlusIcon } from "lucide-react"

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

export function ButtonIcon() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button size="icon-xs" variant="secondary" aria-label="Add">
        <PlusIcon />
      </Button>
      <Button size="icon-sm" variant="secondary" aria-label="Add">
        <PlusIcon />
      </Button>
      <Button size="icon" variant="secondary" aria-label="Add">
        <PlusIcon />
      </Button>
      <Button size="icon-lg" variant="secondary" aria-label="Add">
        <PlusIcon />
      </Button>
      <Button size="icon" variant="ghost" aria-label="Voice input">
        <MicIcon />
      </Button>
      <Button size="icon" className="rounded-full" aria-label="Send">
        <ArrowUpIcon />
      </Button>
    </div>
  )
}

import { LoaderCircleIcon } from "lucide-react"

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

export function ButtonStates() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button disabled>Disabled</Button>
      <Button variant="secondary" disabled>
        Disabled
      </Button>
      <Button variant="secondary" disabled>
        <LoaderCircleIcon data-icon="inline-start" className="animate-spin" />
        Saving
      </Button>
      <Button variant="secondary" aria-invalid>
        Invalid
      </Button>
      <Button variant="secondary" disabled focusableWhenDisabled>
        Focusable when disabled
      </Button>
    </div>
  )
}

import { ExternalLinkIcon } from "lucide-react"

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

export function ButtonAsLink() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button
        variant="secondary"
        nativeButton={false}
        render={<a href="https://base-ui.com/react/components/button" />}
      >
        Base UI docs
        <ExternalLinkIcon data-icon="inline-end" />
      </Button>
      <Button variant="link" nativeButton={false} render={<a href="#button" />}>
        Back to top
      </Button>
    </div>
  )
}