Component

Button

A tactile action primitive with solid, soft, outline, ghost, danger, and icon treatments.

Preview

Installation

Install the package, then import the component and shared stylesheet in your app.

Package install

Install the package when you want components imported from axie-ui.

install

pnpm add axie-ui

Import

code

import "axie-ui/styles.css";import { Button } from "axie-ui";

Registry install

Use the direct URL when you want shadcn to copy editable source into your app. This works without the official registry and does not install axie-ui.

registry

pnpm dlx shadcn@latest add https://axie.alexi.life/r/button.json

Copied source import

code

import "@/styles/axie.css";import { Button } from "@/components/axie/button";

Prefer @axie/button? Add the Axie namespace once from the Installation page, then use that shorthand.

Usage

code

import { Button } from "axie-ui";export function Example() {  return <Button>Save changes</Button>;}

Accessibility

Use native button behavior for actions and links for navigation.
Icon-only buttons need an accessible label.
Keep disabled buttons out of critical flows unless another path explains why the action is unavailable.

With icon button

API Reference

Prop	Type	Default	Description
variant	solid \| soft \| outline \| ghost \| danger	solid	Controls color, border, and surface treatment.
size	sm \| md \| lg \| icon	md	Changes the control height and horizontal padding.
asChild	boolean	false	Renders the button styles on a child element through Radix Slot.