Foundation
Button
The primary action, with ink, brand, outline, ghost, and destructive variants.
Installation
Copy the source with the CLI to own and edit it, or import it from the npm package.
npx aback-ui@latest add buttonWrites components/ui/button.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.
Usage
Import the parts you need from the installed file. The Code tab above has a complete, working example.
import { Button } from "@/components/ui/button";API reference
Props and composition points for Button. Native element props pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "brand" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "default" | default is neutral ink. brand is Aback Blue and is reserved for brand actions. |
size | "xs" | "sm" | "default" | "lg" | "icon" | "icon-sm" | "icon-xs" | "icon-lg" | "default" | Controls height, padding, and icon size on the 36px control grid. |
asChild | boolean | false | Renders the child element with button styles, typically a link. |
type | "button" | "submit" | "reset" | Native default | Set submit explicitly on form actions. Native buttons submit inside a form. |
disabled | boolean | None | Removes pointer events and reduces opacity. Prefer explaining why when possible. |
Dependencies: class-variance-authority, radix-ui, plus the shared @/lib/utils helper.
Accessibility
Semantics, keyboard behavior, and the decisions that keep the component operable.
- Renders a real button unless asChild is used, so Enter and Space both activate it.
- Icon-only sizes require an aria-label; the icon itself is hidden from assistive technology.
- Focus uses a two-pixel brand ring with an offset on both themes.
- Disabled buttons are removed from interaction but remain readable. Do not use disabled as a validation message.
Used in production
The Aback products whose interfaces shaped this component.