Badge

Installation

pnpm dlx shadcn@latest add @uitopia/badge

Usage

import { Badge } from "@/components/ui/badge"

<Badge>Badge</Badge>

Link

You can use the render prop to make another component look like a badge. Here's an example of a link that looks like a badge.

import Link from "next/link"

import { Badge } from "@/components/ui/badge"

export function LinkAsBadge() {
  return <Badge render={<Link href="/pricing" />}>New</Badge>
}

Examples

Outline

Secondary

Destructive

Info

Success

Warning

Error

Large

With Icon

With Link

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.

Prop Mapping

Quick Checklist

• Replace asChild → render on Badge

Additional Notes

Size Comparison

Compared to shadcn/ui, our Badge component includes size variants for better density control. shadcn/ui badges have a fixed size, while our component offers flexible sizing with sm, default, and lg options.

So, if you want to preserve the original shadcn/ui badge size, you should use the lg size in ui/topia.

New Variants

We've added new colored variants to the existing ones (default, destructive, outline, secondary) for better semantic meaning and visual communication:

We've added new colored variants for better semantic meaning:

Ensure you have the following variables imported in your CSS file:

• --destructive-foreground
• --info
• --info-foreground
• --success
• --success-foreground
• --warning
• --warning-foreground

Comparison Example

import Link from "next/link"
import { Badge } from "@/components/ui/badge"

export function LinkAsButton() {
  return (
    <Badge asChild>
      <Link href="/login">Login</Link>
    </Badge>
  )
}

import Link from "next/link"
import { Badge } from "@/components/ui/badge"

export function LinkAsButton() {
  return (
    <Badge render={<Link href="/login" />}>Login</Badge>
  )
}