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 '@nimjs/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

Status: stable

Since: 0.0.0

Files

button.tsx

Tokens

primaryprimary-foregroundradiusringsecondaryborder

Dependencies

utilstokens

Accessibility

contrast awarefocus visiblekeyboard accessiblenative semanticsscreen reader readable

Anatomy

root

Native button element that owns intent, size, disabled, and focus-visible states.

content

Inline label or icon content rendered by the consumer.

Usage patterns

primary action

Use one primary button for the dominant action in a local workflow.

secondary action

Use secondary, outline, or ghost variants for supporting actions.

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.