Button

The Button component is the workhorse of every UI. aidimension ships it with 5 variants, 3 sizes, and full Radix-based accessibility.

Import#

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

Basic usage#

<Button>Click me</Button>

Variants#

<Button variant="default">Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
<Button variant="destructive">Delete</Button>

<Button variant="default">Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
<Button variant="destructive">Delete</Button>

Variant	Use case
`default`	Primary action (Save, Submit, Continue)
`secondary`	Secondary action (Cancel)
`outline`	Tertiary action, lower visual weight
`ghost`	Inline action in a list, row, or card
`link`	Looks like text, behaves like a button
`destructive`	Delete, remove, irreversible actions

Sizes#

<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon"><Icon /></Button>

<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon"><Icon /></Button>

With icons#

import { Mail, ArrowRight } from "lucide-react";

<Button>
  <Mail className="size-4" /> Email me
</Button>

<Button>
  Continue <ArrowRight className="size-4" />
</Button>

import { Mail, ArrowRight } from "lucide-react";

<Button>
  <Mail className="size-4" /> Email me
</Button>

<Button>
  Continue <ArrowRight className="size-4" />
</Button>

Loading state#

<Button disabled>
  <Loader2 className="size-4 animate-spin" /> Saving…
</Button>

<Button disabled>
  <Loader2 className="size-4 animate-spin" /> Saving…
</Button>

As a child#

Use the asChild prop to render as a different element (e.g. a link):

import Link from "next/link";

<Button asChild>
  <Link href="/dashboard">Go to dashboard</Link>
</Button>

import Link from "next/link";

<Button asChild>
  <Link href="/dashboard">Go to dashboard</Link>
</Button>

API reference#

Prop	Type	Default	Description
`variant`	`"default" \	"secondary" \	"outline" \	"ghost" \	"link" \	"destructive"`	`"default"`	Visual style
`size`	`"sm" \	"default" \	"lg" \	"icon"`	`"default"`	Size
`asChild`	`boolean`	`false`	Render as a child element
`disabled`	`boolean`	`false`	Disables the button
`type`	`"button" \	"submit" \	"reset"`	`"button"`	HTML button type

All other props are forwarded to the underlying <button> element.

Accessibility#

Built on Radix's Slot primitive
Full keyboard support: Tab to focus, Enter / Space to activate
aria-disabled and aria-busy set automatically
Focus ring uses the --ring color token
prefers-reduced-motion respected (no scale transforms on press)

Examples in the wild#

Save button — <Button variant="default" type="submit">Save changes</Button>
Delete confirmation — <Button variant="destructive">Delete account</Button>
Cancel — <Button variant="outline" type="button">Cancel</Button>
Icon-only close — <Button size="icon" variant="ghost" aria-label="Close"><X /></Button>