Button

Installation

pnpm dlx shadcn@latest add @uitopia/button

Usage

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

<Button>Button</Button>

Link

You can use the render prop to make another component look like a button. 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" />}>Login</Button>
}

Examples

Default

Outline

Secondary

Destructive

Destructive Outline

Ghost

Link

Extra-small Size

Small Size

Large Size

Extra-large Size

Disabled

Icon

Icon Small Size

Icon Large Size

With Icon

With Link

Loading

Comparing with Radix / shadcn

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 ui/topia quickly.

Quick Checklist

• Replace asChild → render on Button

Additional Notes

Size Comparison

ui/topia button sizes are more compact compared to shadcn/ui, making them better suited for dense applications. We also introduce new sizes (xs, xl, icon-sm, icon-lg) for more granular control:

So, for example, if you were using the default size in shadcn/ui and you want to preserve the original height, you should use the lg size in ui/topia.

New Variants

We've added a new destructive-outline variant for better UX patterns:

• Primary actions: Use destructive (solid red) for the main destructive action
• Secondary triggers: Use destructive-outline (outline red) to avoid alarming red buttons in the main interface

Comparison Example

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

<Button render={<Link href="/login" />}>Login</Button>