Button

Button is built on the Base UI Button primitive and exposes a shadcn-compatible variant API through class-variance-authority. It supports a render prop for composition (the Base UI equivalent of asChild).

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/button.json

UsageCopy Anchor Link

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

export default function Example() {
  return <Button>Button</Button>;
}

ExamplesCopy Anchor Link

VariantsCopy Anchor Link

SizesCopy Anchor Link

With an iconCopy Anchor Link

Buttons automatically size and space child SVG icons. Drop a Remixicon component inside:

import { RiArrowRightLine } from "@remixicon/react";
import { Button } from "@/components/ui/button";

export default function Example() {
  return (
    <Button>
      Continue
      <RiArrowRightLine />
    </Button>
  );
}

As a linkCopy Anchor Link

Navigation belongs on a link, not a button, so apply buttonVariants to the link itself. Base UI's Button enforces button semantics, which a link must not take on.

import Link from "next/link";
import { buttonVariants } from "@/lib/button-variants";

export default function Example() {
  return (
    <Link href="/docs" className={buttonVariants()}>
      Go to docs
    </Link>
  );
}

DisabledCopy Anchor Link

APICopy Anchor Link

ButtonCopy Anchor Link

The component also accepts all native button element props.