Buttons & Actions

Interactive button components and action triggers.

Button components for user interactions with multiple variants, sizes, and loading states.

Button

Primary button component with variants and sizes.

import { Button } from '@kit/ui/button';

Variants

<Button variant="default">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>

Sizes

<Button size="xs">Extra Small</Button>
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>

Icon Buttons

import { Plus, Settings, Menu } from 'lucide-react';
{/* Standard icon button (36x36px) */}
<Button size="icon">
  <Plus className="h-4 w-4" />
</Button>
{/* Small icon button (32x32px) */}
<Button size="icon-sm">
  <Settings className="h-4 w-4" />
</Button>
{/* Extra small icon button (24x24px) */}
<Button size="icon-xs">
  <Plus className="h-3 w-3" />
</Button>
{/* Large icon button (40x40px) */}
<Button size="icon-lg">
  <Menu className="h-5 w-5" />
</Button>

Icon Button Sizes:

Size	Dimensions	Use Case
`icon-xs`	24x24px (size-6)	Compact UI, inline actions
`icon-sm`	32x32px (size-8)	Secondary actions
`icon`	36x36px (size-9)	Default icon buttons
`icon-lg`	40x40px (size-10)	Prominent actions, headers

Loading State

import { Spinner } from '@kit/ui/spinner';
<Button disabled={isPending}>
  {isPending ? (
    <>
      <Spinner className="mr-2 h-4 w-4" />
      Loading...
    </>
  ) : (
    'Submit'
  )}
</Button>

As Link

Uses the render prop pattern from Base UI:

import Link from 'next/link';
<Button render={<Link href="/dashboard" />}>
  Go to Dashboard
</Button>

Button Group

Group related buttons together.

import { ButtonGroup } from '@kit/ui/button-group';

<ButtonGroup>
  <Button variant="outline">Left</Button>
  <Button variant="outline">Center</Button>
  <Button variant="outline">Right</Button>
</ButtonGroup>

Vertical Orientation

<ButtonGroup orientation="vertical">
  <Button variant="outline">Top</Button>
  <Button variant="outline">Middle</Button>
  <Button variant="outline">Bottom</Button>
</ButtonGroup>

Card Button

Clickable card component for selection interfaces.

import { CardButton, CardButtonHeader, CardButtonTitle, CardButtonContent, CardButtonFooter } from '@kit/ui/card-button';

<CardButton onClick={handleClick}>
  <CardButtonHeader>
    <CardButtonTitle>Option Title</CardButtonTitle>
  </CardButtonHeader>
  <CardButtonContent>
    <span className="text-muted-foreground text-sm">
      Description of this option
    </span>
  </CardButtonContent>
</CardButton>

Without Arrow

<CardButton>
  <CardButtonHeader displayArrow={false}>
    <CardButtonTitle>Simple Card</CardButtonTitle>
  </CardButtonHeader>
  <CardButtonContent>
    Content without arrow indicator
  </CardButtonContent>
</CardButton>

Copy to Clipboard

Button that copies text to clipboard with toast feedback.

import { CopyToClipboard } from '@kit/ui/copy-to-clipboard';

<CopyToClipboard value="text-to-copy">
  Copy this text
</CopyToClipboard>
{/* Custom messages */}
<CopyToClipboard
  value={apiKey}
  successMessage="API key copied!"
  errorMessage="Failed to copy API key"
>
  {apiKey}
</CopyToClipboard>

Shows a copy icon that changes to a checkmark on success, with toast notification.

Next: Layout & Structure →