Button

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

Installation

npx shadcn@latest add https://exawizards.com/exabase/design/registry/button.json

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

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

You can use the buttonVariants helper to create a link that looks like a button.

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

<Link className={buttonVariants({ variant: "outline" })}>Click here</Link>

Alternatively, you can set the asChild parameter and nest the link component.

<Button asChild>
  <Link href="/login">Login</Link>
</Button>

Props of the button element are also available.

Prop	Type	Default	Description
`variant`	`"outline" \| "secondary" \| "ghost" \| "link" \| "primary" \| "primary-outline" \| "primary-ghost" \| "destructive" \| "destructive-outline" \| "destructive-ghost"`	`primary`	The variant of the button.
`size`	`"default" \| "sm" \| "lg" \| "icon" \| "icon-sm"`	`default`	The size of the button.
`asChild`	`boolean`	`false`	Change the default rendered element for the one passed as a child, merging their props and behavior.