Button

• Type: Component (actions)
• Access: Free, open source
• Page: https://ui.xzero.co.uk/components/button
• Markdown: https://ui.xzero.co.uk/components/button/markdown
• Registry item: https://mcp.xzero.co.uk/r/button.json
• Source file: registry/components/button/button.tsx
• Dependencies: motion
• Keywords: action, control, react button, animated button, loading button, button with spinner, button press animation, morphing button label, primary button

When to use

• Any single action on a page, form, or dialog, such as Save, Continue, or Cancel.
• Actions whose label changes in place, like Save to Saved, where the width should spring instead of jump.
• Short async work where a spinner on the button is enough feedback, via loading.

When not to use

• Use action-button when the button itself should show pending and success states after an async commit.
• Use split-button when one default action has two to five close variants.
• Use hold-to-confirm for destructive actions that need more than a single click.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui/button

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

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

export function SaveBar() {
  return (
    <Button variant="primary" loading={saving} onClick={save}>
      Save changes
    </Button>
  );
}

Examples

Label that morphs after saving

<Button variant="secondary" loading={saving} onClick={save}>
  {saved ? "Saved" : "Save draft"}
</Button>

API reference

Button

A native button with press feedback and a label that morphs its width when the content changes.

Prop	Type	Default	Description
variant	"primary" | "secondary" | "ghost" | "danger"	"primary"	Visual weight. Use one primary action per surface.
size	"sm" | "md" | "lg"	"md"	Height and padding.
loading	boolean	false	Shows a spinner, sets aria-busy, and swallows clicks while keeping focus.
...props	ButtonHTMLAttributes<HTMLButtonElement>	–	Forwarded to the underlying button, including ref, disabled, type, and onClick.

Keyboard interactions

Keys	Action
Enter / Space	Activates the button.

Accessibility

• Renders a native button, so role and focus come for free.
• Loading uses aria-busy and aria-disabled instead of disabled, so keyboard focus is not lost mid-action.
• Icon-only buttons need an aria-label.
• Disabled primary buttons fade as a whole. Disabled secondary and danger buttons keep their border and take a muted fill and label, and disabled ghost buttons take a muted label, so an unavailable action still reads as a button.

Motion

• Presses scale to about 0.97 on a snappy spring; icon-sized buttons press slightly deeper.
• A new label crossfades with a short blur while the width springs to fit.
• Reduced motion drops the press scale and swaps labels with a plain fade.

Responsive behavior

• Size is fixed by the size prop; the button never changes layout by breakpoint, so pick lg for primary touch targets.
• Hover styles apply only on hover-capable fine pointers, so taps on touch screens do not stick in a hover state.

Performance

• A ResizeObserver measures the label so the width can spring; one per button is cheap, but avoid hundreds in a long list.
• Label changes animate opacity, transform, and a small blur only, with no layout thrash beyond the width spring.

Notes for AI

• Default choice for any single action. Use action-button for dense icon toolbars and split-button when one action has close alternatives.
• Pass a changing label (Save → Saved) as children to get the width morph for free.
• Wrap in a Radix trigger with asChild; the press scale turns off automatically for popup anchors.

Related

• Action button: A compact button for frequent toolbar actions.
• Split button: A primary action with a menu of nearby alternatives.
• Copy button: Copy a value with immediate confirmation.
• Hold to confirm: Confirm a destructive action by holding, not tapping.

Also in buttons

• Button group: Related actions joined into one surface with hairline dividers: a hover highlight glides between segments, the pressed one answers in place, and an attached menu can close the row.
• Floating button group: Separate soft buttons in a quiet tray, with one shared highlight that morphs from button to button as you move, and a pressed state that settles in place.
• Expanding button group: Icon buttons in a compact group: the one you point at or focus grows to reveal its label while its neighbours slide aside, and an action confirms in place.
• Action swap: Swap an action label while preserving its place and intent.
• Icon morph: Icons that morph between states: menu to close, play to pause, copy to check, and more.
• Confirm morph: A destructive button that morphs into an inline confirmation, a spinner, and a result with undo.

Guidance for AI tools

Button: A clear, responsive action with quiet secondary states. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt