Component

Button

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

Preview

Installation

Packages are unreleased. Follow the packed artifact setup for package mode, or run the local CLI in copy mode and complete the reported npm, token CSS, and Tailwind setup.

pnpm exec ui add button

Full installation guide

Usage

This example uses package mode. In copy mode, import the generated component from your project and complete the manual setup steps in the installation guide.

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>
      <Button loading>Saving</Button>
      <Button disabled>Unavailable</Button>
    </div>
  );
}

System metadata

Registry

button

Category: actions

Status: preview

Version marker: 0.0.0 (unreleased)

Files

button.tsx

Tokens

backgroundforegroundmutedprimaryprimary-foregroundradiusringsecondarysecondary-foregroundborderdestructivedestructive-foreground

Dependencies

utilstokens

Copy-mode npm packages

class-variance-authorityclsxtailwind-merge

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 variant for intent and size for density. loading keeps the label width and disables activation while exposing aria-busy. Icon-only buttons need an accessible name such as aria-label.