Skip to content
aq-ui
Back to ComponentsComponent

Button

An action control with native semantics, loading, six variants, eight sizes, and navigation and form patterns.

Preview

This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.

Loading interactive preview…

Installation

pnpm dlx aq-ui@alpha add button

Usage

Use the quick start below for actions. Navigation stays a real anchor styled with buttonVariants; a visual variant never changes semantics.

Drive loading from app state. It disables activation, sets aria-busy, and shows a spinner; loadingText clarifies the pending action.

Props and defaults

variant: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" = "default"
  Visual style only.
size: "xs" | "sm" | "default" | "lg" | "icon-xs" | "icon-sm" | "icon" | "icon-lg" = "default"
  Text or icon dimensions.
loading: boolean = false
  Sets aria-busy and disables activation.
loadingText: ReactNode = children
  Busy copy; null intentionally hides it.
loadingPosition: "start" | "end" = "start"
  Indicator edge.
loadingIndicator: ReactNode = spinner
  Custom node; null hides the spinner.
render: ReactElement | render function = <button>
  Custom action element.
nativeButton: boolean = true
  False for non-native actions only.
focusableWhenDisabled: boolean = false
  Keeps disabled actions tabbable.
disabled: boolean = false
  Prevents activation.
type: "button" | "submit" | "reset" = "button"
  Native form behavior.
className: string | state callback = undefined
  Additional or state-based styles.

Accessibility

  • Use buttons for actions and anchors for navigation. A visual variant does not create link semantics; neither does render.
  • Name icon-only buttons with aria-label or visible text.
  • For async work, use loading and clear loadingText; disabled and aria-busy are automatic.
  • In forms, choose type explicitly. Native buttons supply Enter and Space behavior; use focusableWhenDisabled only when disabled actions must stay discoverable.

API reference

SSR-safeView full source

Quick start

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

<Button type="button">Save changes</Button>

Exports

Button (const), ButtonProps (type), buttonVariants (const)

Registry dependencies

utils

Package dependencies

@base-ui/react@^1.7.0, class-variance-authority@^0.7.1

Files

  • components/ui/button.tsx

Source