Button

A React component in Beamline's Actions category, in the free sample.

The action control: five weights and a brand fill, a buy/sell tone, sm/md/lg and a 44 px touch size, icon-only, a loading state that keeps its size and focus, and a label that changes in place.

Use it for

Any action that happens on click: submit, save, open, run. One primary (or accent) per view.

Not for

Navigation to another page (a link; or asChild around the link when it must look like a button).
A destructive action that needs friction (confirm-morph or hold-to-confirm).
Several related actions (split-button or dropdown-menu).

Anatomy

root (button, or the child element with asChild)
leading icon (any icon element among the children, before the text)
label (the text; its width follows the text when it changes)
loader (a spinner that opens in front of the label while loading)

Variants

variant: primary, secondary, outline, ghost, danger, accent
size: sm, md, lg, touch (44 px, bottom action bars on phones)
shape: text (padding on both sides), icon-only (square; detected when there is no text)
tone: up (buy: --pui-up fill or label), down (sell: --pui-down fill or label)

States

rest
hover (arrives at once, leaves over --pui-motion-out)
pressed (scale 0.97, icon/sm 0.95, at 0ms; none on popup anchors or with reduced motion)
focus (the look's focus ring, never animated)
disabled (--pui-opacity-disabled)
working (loading: loader opens in front of the label, size and focus kept, aria-busy, clicks ignored)
resolved (the caller changes the label in place, e.g. Save → Saved; never reverted by a timer)
error (the caller keeps or restores the label and shows the message next to the cause; the button never turns red)

Keyboard

Enter / Space activate (native button)
Tab focuses; focus stays on the button through loading

Motion

Hover colour arrives at 0ms and leaves over --pui-motion-out. Press scales to 0.97 at once (narrow buttons 0.95) and springs back. A changed label slides up out of a soft blur while the width follows on spring.morph; the loader opens its width from 0 so nothing jumps. Reduced motion: colour changes only, no scale, no slide.

Props

Prop	Type	Default	Description
`variant`	`"primary" \| "secondary" \| "outline" \| "ghost" \| "danger" \| "accent"`	`"primary"`	Visual weight. primary is the ink-filled main action; accent fills with the brand; danger is for destructive actions.
`size`	`"sm" \| "md" \| "lg" \| "touch"`	`"md"`	Height 32 / 36 / 40 px; touch 44 px for a bottom action bar on a phone.
`tone`	`"up" \| "down"`	—	Market side. On primary/accent the fill becomes --pui-up (buy) or --pui-down (sell) with the matching on-colour ink; on quiet variants the label takes the colour. Pair with a word or arrow.
`loading`	`boolean`	—	Shows the loader, sets aria-busy and ignores clicks; size and focus stay.
`look`	`"soft" \| "blueprint" \| "glass" \| "metal" \| "glow" \| "pop" \| "mono" \| "ink"`	—	Paint this button in another look than the one in force around it. Primary and accent are solids, secondary a raised control; outline, ghost and danger keep their own quiet paint.
`asChild`	`boolean`	—	Render the single child (a link, a Radix trigger) with the button's look and behaviour.
`...button attributes`	`ButtonHTMLAttributes`	—	type defaults to "button". Icon-only buttons need aria-label.

Dependencies

motion, radix-ui

Import

import { Button } from "@/components/button/button";

Get it

Button is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Button is in the free sample, which costs nothing. Get Beamline · Connect your agent