Usage

Component.tsx

<div>
  <Button>Click me</Button>
</div>

Using as a Link

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

import { buttonVariants } from "@/components/loomui/button";

<Link href="/login" className={buttonVariants({ variant: "secondary" })}>
  Sign in
</Link>

You can also use the asChild prop to render a child component as a button.

<Button asChild>
  <Link href="/login">Sign in</Link>
</Button>

Variants

You can use the variant prop to change the appearance of the button. Below is a list of all the variants available. You can create your own variants too!!

Primary

Component.tsx

<div>
  <Button>Click me</Button>
</div>

Secondary

Component.tsx

<div>
  <Button variant="secondary">Click me</Button>
</div>

Destructive

Component.tsx

<div>
  <Button variant="destructive">Click me</Button>
</div>

Outline

Component.tsx

<div>
  <Button variant="outline">Click me</Button>
</div>

Ghost

Component.tsx

<div>
  <Button variant="ghost">Click me</Button>
</div>

Link

Component.tsx

<div>
  <Button variant="link">Click me</Button>
</div>

Button

On this page