Component

Button

Buttons provide semantic variants and size options with accessible focus styles and SSR-safe rendering.

Preview

Usage

Button example · tsx

import { Button } from '@nim-ui/ui';

export function Example() {
  return (
    <div className="flex gap-3">
      <Button>Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
    </div>
  );
}

System metadata

Registry

button

Category: ui

Tokens

primaryprimary-foregroundradiusringsecondaryborder

Dependencies

utilstokens

Guidance

Use semantic variants for intent, not for ad hoc color changes. If a new visual meaning is needed across the system, introduce it through tokens and documented variants rather than one-off class overrides.