Button

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

export function ButtonAllVariants() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <Button>Send application</Button>
      <Button variant="outline">Save draft</Button>
      <Button variant="secondary">Preview</Button>
      <Button variant="ghost">Cancel</Button>
      <Button variant="destructive">Withdraw</Button>
      <Button variant="ghost-destructive">Remove attachment</Button>
      <Button variant="link">Read the guidelines</Button>
    </div>
  )
}

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

export function ButtonDisabled() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3 rounded-lg border p-4">
      <div className="flex flex-col gap-1">
        <p className="text-sm font-medium">Ready to send?</p>
        <p className="text-sm text-muted-foreground">
          Sign the application with BankID before you send it to the building permit unit.
        </p>
      </div>
      <div className="flex flex-wrap justify-end gap-2">
        <Button variant="ghost" disabled>
          Cancel
        </Button>
        <Button variant="outline" disabled>
          Save draft
        </Button>
        <Button disabled>Send application</Button>
      </div>
    </div>
  )
}

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

export function ButtonSizes() {
  return (
    <div className="flex flex-wrap items-end justify-center gap-4">
      {(['xs', 'sm', 'default', 'lg'] as const).map((size) => (
        <div key={size} className="flex flex-col items-center gap-2">
          <Button size={size}>Book a time</Button>
          <span className="text-xs text-muted-foreground">{size}</span>
        </div>
      ))}
    </div>
  )
}

import { DownloadIcon, MoreHorizontalIcon, PlusIcon, PrinterIcon, ShareIcon } from 'lucide-react'
import { Button } from '@/components/ui/button'

export function ButtonIconSizes() {
  return (
    <div className="flex flex-col items-center gap-6">
      <div className="flex items-end gap-4">
        {(['icon-xs', 'icon-sm', 'icon', 'icon-lg'] as const).map((size) => (
          <div key={size} className="flex flex-col items-center gap-2">
            <Button size={size} variant="outline" aria-label="Add note">
              <PlusIcon />
            </Button>
            <span className="text-xs text-muted-foreground">{size}</span>
          </div>
        ))}
      </div>
      <div className="flex items-center gap-1 rounded-lg border p-1">
        <Button size="icon-sm" variant="ghost" aria-label="Print decision">
          <PrinterIcon />
        </Button>
        <Button size="icon-sm" variant="ghost" aria-label="Download decision">
          <DownloadIcon />
        </Button>
        <Button size="icon-sm" variant="ghost" aria-label="Share decision">
          <ShareIcon />
        </Button>
        <Button size="icon-sm" variant="ghost" aria-label="More actions">
          <MoreHorizontalIcon />
        </Button>
      </div>
    </div>
  )
}

import { CopyIcon, PencilIcon, Trash2Icon } from 'lucide-react'
import { Button } from '@/components/ui/button'

const CASE_ROWS = [
  { id: '2026-04812', title: 'Extension of detached house, Storgatan 14' },
  { id: '2026-04655', title: 'Parking permit for residents, zone C' },
  { id: '2026-04390', title: 'Environmental permit, Norrby workshop' },
]

export function ButtonRowActions() {
  return (
    <ul className="flex w-full max-w-lg flex-col divide-y rounded-lg border">
      {CASE_ROWS.map((item) => (
        <li key={item.id} className="flex items-center justify-between gap-4 py-2 pr-2 pl-4">
          <div className="flex min-w-0 flex-col">
            <span className="truncate text-sm font-medium">{item.title}</span>
            <span className="text-xs text-muted-foreground tabular-nums">{item.id}</span>
          </div>
          <div className="flex shrink-0 items-center gap-1">
            <Button size="icon-sm" variant="ghost" aria-label={`Edit case ${item.id}`}>
              <PencilIcon />
            </Button>
            <Button size="icon-sm" variant="ghost" aria-label={`Duplicate case ${item.id}`}>
              <CopyIcon />
            </Button>
            <Button size="icon-sm" variant="ghost-destructive" aria-label={`Delete case ${item.id}`}>
              <Trash2Icon />
            </Button>
          </div>
        </li>
      ))}
    </ul>
  )
}

import {
  ArrowRightIcon,
  DownloadIcon,
  PaperclipIcon,
  ShieldCheckIcon,
  Trash2Icon,
} from 'lucide-react'
import { Button } from '@/components/ui/button'

export function ButtonWithIcon() {
  return (
    <div className="flex max-w-lg flex-wrap items-center justify-center gap-3">
      <Button>
        <ShieldCheckIcon data-icon="inline-start" />
        Sign in with BankID
      </Button>
      <Button variant="outline">
        Continue
        <ArrowRightIcon data-icon="inline-end" />
      </Button>
      <Button variant="secondary">
        <DownloadIcon data-icon="inline-start" />
        Download decision
      </Button>
      <Button variant="outline" size="sm">
        <PaperclipIcon data-icon="inline-start" />
        Attach file
      </Button>
      <Button variant="destructive" size="sm">
        <Trash2Icon data-icon="inline-start" />
        Delete document
      </Button>
    </div>
  )
}

import { Loader2Icon } from 'lucide-react'
import { Button } from '@/components/ui/button'

export function ButtonLoading() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <Button disabled>
        <Loader2Icon data-icon="inline-start" className="animate-spin" />
        Sending application…
      </Button>
      <Button variant="outline" disabled>
        <Loader2Icon data-icon="inline-start" className="animate-spin" />
        Saving draft…
      </Button>
      <Button size="icon" variant="secondary" disabled aria-label="Refreshing case list">
        <Loader2Icon className="animate-spin" />
      </Button>
    </div>
  )
}

import { ArrowUpRightIcon } from 'lucide-react'
import { Button } from '@/components/ui/button'

export function ButtonAsLink() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      {/* biome-ignore lint/a11y/useAnchorContent: the children are rendered inside the anchor */}
      <Button render={<a href="#my-pages" />} nativeButton={false}>
        Go to My pages
      </Button>
      {/* biome-ignore lint/a11y/useAnchorContent: the children are rendered inside the anchor */}
      <Button render={<a href="#opening-hours" />} nativeButton={false} variant="outline">
        Opening hours
        <ArrowUpRightIcon data-icon="inline-end" />
      </Button>
    </div>
  )
}

import { ArrowLeftIcon, ArrowRightIcon, SaveIcon } from 'lucide-react'
import { Progress } from '@/components/ui/progress'
import { Button } from '@/components/ui/button'

export function ButtonFormActions() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-4 rounded-lg border p-4">
      <div className="flex flex-col gap-2">
        <div className="flex items-center justify-between text-sm">
          <span className="font-medium">Step 3 of 4 · Attachments</span>
          <span className="text-muted-foreground">Preschool application</span>
        </div>
        <Progress value={75} aria-label="Application progress" />
      </div>
      <div className="flex flex-wrap items-center justify-between gap-2">
        <Button variant="ghost">
          <ArrowLeftIcon data-icon="inline-start" />
          Back
        </Button>
        <div className="flex gap-2">
          <Button variant="outline">
            <SaveIcon data-icon="inline-start" />
            Save draft
          </Button>
          <Button>
            Continue
            <ArrowRightIcon data-icon="inline-end" />
          </Button>
        </div>
      </div>
    </div>
  )
}