Button

The Button component is a flexible, accessible trigger for actions and navigation. It supports multiple visual variants and sizes, optional full‑width presentation, content justification, and composition via asChild.

Features

• Variants: default, destructive, outline, secondary, ghost, link
• Sizes: default, sm, lg, icon
• Layout controls: full/fit width, content justification
• asChild composition to render other elements with button styling
• Sensible focus styles and disabled state
• Optional icon sizing control via iconSize

Usage

import { Button } from '@loke/design-system/button';
import { ArrowRight } from '@loke/icons';

export default function Example() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button>Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
      <Button>
        Next <ArrowRight />
      </Button>
    </div>
  );
}

Tips:

• Use the icon size for icon‑only buttons and set an accessible label with aria-label.
• Set width="full" for full‑width buttons (e.g., mobile forms).
• Use justify to align content (e.g., between with two elements).

Props

Examples

Variants

<div className="flex flex-wrap gap-3">
  <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>

Sizes

<SizesButtonExample />

With icons

<div className="flex flex-wrap gap-3">
  <Button><Plus /> Add</Button>
  <Button variant="destructive"><Trash /> Delete</Button>
  <Button variant="outline">Next <ArrowRight /></Button>
</div>

Disabled states

<DisabledStatesButtonExample />

Width

<WidthButtonExample />

Justification

<JustificationButtonExample />

As child

<AsChildButtonExample />

Custom styles and buttonVariants

<Button className="bg-purple-600 hover:bg-purple-700">Custom Button</Button>

<a
  href="#"
  className={buttonVariants({ variant: 'outline', size: 'sm' })}
/>

Accessibility

• Icon‑only buttons must have an accessible name via aria-label.
• Ensure the button’s action is clear and concise in its label.
• When used inside forms, set type appropriately (e.g., type="button" to avoid accidental submission).
• The component includes visible focus styling by default; ensure it remains discernible against your theme.

Best practices

• Choose a variant that communicates intent (e.g., destructive for deletion).
• Keep labels short and action‑oriented (“Save”, “Create”, “Delete”).
• Group related actions and de‑emphasize secondary actions (use secondary, ghost, or link).
• Prefer size="icon" for icon‑only buttons; include an aria-label.
• Use buttonVariants for non‑button elements that should look and feel like buttons (e.g., anchors).