Button

Button triggers an action such as saving changes, opening a panel, or deleting a record. Six visual variants and five sizes cover different levels of emphasis.

Use a button for an action that changes the current interface or data. Use a link when activating the control only navigates to another location.

Installation

pnpm dlx shadcn@latest add http://ui.argv-tech.dev/r/button.json

Usage

import { Button } from "@/components/ui/argv/button"

export function DeployButton() {
    return <Button>Deploy release</Button>
}

Use Base UI's render prop when a button should render as another element:

<Button variant="link" render={<a href="/docs" />}>
    Read the docs
</Button>

Variants

Use default for the primary action in a region, outline or secondary for supporting actions, and ghost for low-emphasis controls. Reserve destructive for harmful or difficult-to-reverse actions. The link variant is intended for controls rendered with link semantics.

<Button>Deploy</Button>
<Button variant="outline">Save draft</Button>
<Button variant="destructive">Delete release</Button>

Sizes

The default, xs, sm, and lg sizes adjust the control height and spacing. Use size="icon" for a square icon-only control and provide an accessible name.

<Button size="sm">Inspect</Button>
<Button size="icon" aria-label="Continue">
    <ArrowRight aria-hidden="true" />
</Button>

Add data-icon="inline-start" or data-icon="inline-end" to an inline icon when the default size should tighten the adjacent padding.

API Reference

Button

The render prop changes the underlying element while preserving argv styling and behavior. All other props are forwarded to the Base UI Button primitive.

Accessibility

Button text should name the action with a clear verb, such as “Save changes.” Avoid vague labels such as “OK” when a more specific label is available.

Icon-only buttons require an accessible name through aria-label or visually hidden text. Decorative icons inside a labeled button should use aria-hidden="true".