Button

Displays a button or a component that looks like a button.

Installation

The Button component is part of the Anya UI registry:


import { Button } from "@/src/registry/anya/ui/button";

Usage


<Button variant="outline">Button</Button>

Demo

Variants

Sizes

With Icons

States

Examples

Size


// Small
<Button size="sm" variant="outline">Small</Button>
<Button size="icon-sm" aria-label="Submit" variant="outline">
  <ArrowUpRightIcon />
</Button>
 
// Medium
<Button variant="outline">Default</Button>
<Button size="icon" aria-label="Submit" variant="outline">
  <ArrowUpRightIcon />
</Button>
 
// Large
<Button size="lg" variant="outline">Large</Button>
<Button size="icon-lg" aria-label="Submit" variant="outline">
  <ArrowUpRightIcon />
</Button>

Default


<Button>Button</Button>

Outline


<Button variant="outline">Outline</Button>

Secondary


<Button variant="secondary">Secondary</Button>

Ghost


<Button variant="ghost">Ghost</Button>

Destructive


<Button variant="destructive">Destructive</Button>

Link


<Button variant="link">Link</Button>

Icon


<Button variant="outline" size="icon" aria-label="Submit">
  <CircleFadingArrowUpIcon />
</Button>

With Icon

The spacing between the icon and the text is automatically adjusted based on the size of the button. You do not need any margin on the icon.


<Button variant="outline" size="sm">
  <Download /> Download
</Button>

Rounded

Use the rounded-full class to make the button rounded.


<Button variant="outline" size="icon" className="rounded-full" aria-label="Submit">
  <ArrowUpIcon />
</Button>

Spinner


<Button size="sm" variant="outline" disabled>
  <Loader2 className="animate-spin" />
  Submit
</Button>

Button Group


<div className="flex gap-2">
  <Button>Save</Button>
  <Button variant="outline">Cancel</Button>
  <Button variant="destructive">Delete</Button>
</div>

Link

You can use the asChild prop to make another component look like a button. Here’s an example of a link that looks like a button.

View Documentation


import Link from "next/link"
 
import { Button } from "@/registry/anya/ui/button"
 
export function LinkAsButton() {
  return (
    <Button asChild>
      <Link href="/components/button#link-1">View Documentation</Link>
    </Button>
  )
}

API Reference

Button

The Button component is a wrapper around the button element that adds a variety of styles and functionality.

Prop	Type	Default	Description
`variant`	`"default" \| "outline" \| "ghost" \| "destructive" \| "secondary" \| "link"`	`"default"`	The visual style variant
`size`	`"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg"`	`"default"`	The size of the button
`asChild`	`boolean`	`false`	When true, merges props with child component
`class`	`string`	-	Additional CSS classes
`disabled`	`boolean`	`false`	Whether the button is disabled
`...props`	`React.ComponentProps<"button">`	-	All standard button HTML attributes

Exports

Button - The main Button component
buttonVariants - The CVA function for custom styling