nalarx-uiButton
Five sizes, eight variants, tones and a selected state, with press feedback and an instant tooltip.
bunx shadcn@latest add @nalarx/buttonUsage
import { Button } from "@/components/ui/nx/Button";
<Button variant="accent">Save</Button>
<Button variant="ghost" icon aria-label="Close" tip="Close"><Icon name="x" size={14} /></Button>
<Button render={<a href="/agents" />} nativeButton={false}>Open agents</Button>Variants
One accent per screen at most: it is the screen's main action. primary is ink, for a strong action that is not the brand call to action.
Sizes
| Size | Height | Use |
|---|---|---|
xs | 24 | Dense row actions |
sm | 28 | Toolbars, filters, actions inside a card |
md | 32 | Default |
lg | 40 | Modal footer primary, form submit, empty-state call to action |
xl | 48 | Landing or onboarding hero, at most one per page |
A pair of actions (Cancel and Save) shares one size. On phones, xs to md grow to a 36px touch target.
States
Icons
icon makes a square button; give it aria-label. handoff nudges a trailing arrow on hover for actions that take the user elsewhere.
Tones
Text colour by meaning, for the unfilled variants.
Tooltip and full width
tip shows at once on hover and keyboard focus (CSS only, no portal). Inside a container that clips, use Tooltip.
Props
Every Base UI Button prop (render, focusableWhenDisabled, nativeButton…), plus:
| Prop | Type | Default |
|---|---|---|
variant | "default" | "primary" | "accent" | "outline" | "soft" | "ghost" | "destructive" | "success" | "default" |
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" |
icon | boolean | false |
block | boolean | false |
tone | "secondary" | "muted" | "faint" | "danger" | "success" | |
selected | boolean | false |
tip, tipAlign | string, "end" | |
handoff, tapTarget | boolean | false |
buttonVariants() returns the classes, for a link styled as a button.
Accessibility
A native <button type="button">; pass type="submit" in forms. The focus ring is a 2px ink outline. Disabled buttons drop to 40% opacity and keep a not-allowed cursor; never disable the main action without saying why next to it.
Replaces
NxBtn in both apps' components/ui/index.tsx and the Platform's base/Button.tsx. See the changelog for the mapping (destructive-ghost, glyph, form submit).