Button

Installation

Usage

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

<Button>Button</Button>

Rendering as another tag

You can use the render prop to make another component look like a button. The button can remain keyboard accessible while being rendered as another tag, such as a <div>.

NOTE: If your rendered element is not a button, you need to pass the nativeButton={false} prop to the button to ensure it is still keyboard accessible. By default, the button will render a native button element.

Here's an example of a link that looks like a button.

import Link from "next/link";

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

export function LinkAsButton() {
  return (
    <Button
      render={<Link href="/login" />}
      nativeButton={false}
    >
      Login
    </Button>
  );
}

Examples

Size

Default

Outline

Secondary

Ghost

Destructive

Link

Icon

Icon Size

With Icon

Radius

Disabled

Loading

If you want focus to remain on the button when it becomes disabled, you can specify the focusableWhenDisabled prop. This prevents focus from being lost and maintains the tab order.

Base UI vs Radix UI

If you’re already familiar with Radix UI and shadcn/ui, this guide highlights the small differences and similarities so you can get started with Pure UI quickly.

Quick Checklist

• Replace asChild → render on Button

Comparison Example

<Button
  asChild
  render={<Link href="/login" />}
  nativeButton={false}
>
  <Link href="/login">Log in</Link>
  Log in
</Button>