Button

import { Button } from '@brika/clay/components/button';

/** `asChild` delegates button styles to the child element, here an anchor tag. */
export default function ButtonAsLinkDemo() {
  return (
    <div className="flex flex-wrap gap-2">
      <Button asChild>
        <a href="https://example.com">Browse components</a>
      </Button>
      <Button asChild variant="outline">
        <a href="https://example.com">View on GitHub</a>
      </Button>
    </div>
  );
}

import { Button } from '@brika/clay/components/button';
import { Settings } from 'lucide-react';

/** Icon-only button, `aria-label` is required for screen readers. */
export default function ButtonIconDemo() {
  return (
    <Button size="icon" aria-label="Open settings">
      <Settings />
    </Button>
  );
}

import { Button } from '@brika/clay/components/button';
import { Loader2 } from 'lucide-react';

/** Disabled with a spinner, use while an async operation is in flight. */
export default function ButtonLoadingDemo() {
  return (
    <div className="flex flex-wrap gap-2">
      <Button disabled>
        <Loader2 className="animate-spin" />
        Saving…
      </Button>
      <Button variant="outline" disabled>
        <Loader2 className="animate-spin" />
        Loading
      </Button>
    </div>
  );
}

import { Button } from '@brika/clay/components/button';

/** Four text sizes, plus matching icon-only variants (`icon-xs` through `icon-lg`). */
export default function ButtonSizesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button size="xs">Extra small</Button>
      <Button size="sm">Small</Button>
      <Button size="default">Default</Button>
      <Button size="lg">Large</Button>
    </div>
  );
}

import { Button } from '@brika/clay/components/button';

/** Six emphasis tiers in one row, ordered from most to least prominent. */
export default function ButtonVariantsDemo() {
  return (
    <div className="flex flex-wrap gap-2">
      <Button>Default</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
    </div>
  );
}