PrimitivesButton

Button

Button is the shared action primitive across Agent UI. It ships the same class-variance-authority recipe used by the chat surfaces, so docs previews and production UIs stay consistent. Use asChild to render a link or another element while keeping button styling.

Button ships with a full API table, a copyable example, and accessibility notes.

tsx

Installation

Install the package once, then import Button from its direct entry point or from the root.

bash

pnpm add @agent-ui/react

tsx

import { Button } from "@agent-ui/react/button";

Tailwind CSS v4 users: add @source "../node_modules/@agent-ui/react/src" to the global stylesheet so the library utilities are generated.

Usage

The example below is the same code that renders the preview. Copy it, swap in your own handlers, and ship.

tsx

1import { Button } from "@agent-ui/react";
2 
3<Button>Send</Button>
4<Button variant="outline" size="sm">Cancel</Button>
5<Button variant="destructive">Delete chat</Button>

API reference

Every prop Button accepts, its type, default, and behaviour.

API reference for this component
Name	Type	Default	Description
variant	"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"	"default"	Visual style.
size	"default" \| "sm" \| "lg" \| "icon"	"default"	Control height and padding.
asChild	boolean	false	Render the child element via Radix Slot instead of a button.
disabled	boolean	false	Native disabled state; also lowers opacity.
className	string	—	Tailwind classes merged with the variant recipe.

Accessibility

Focus-visible ring, disabled pointer-events, and native keyboard behaviour are built in.

Use it with the rest of the library

Button composes with MessageList, ChatShell, useChat, and the provider compose blocks. Browse the full reference or see all components in the gallery.

5 lines · copy-ready