Lencana

Label kecil untuk status, jumlah, dan tag pada kartu, tabel, dan elemen navigasi — dengan sentuhan gaya neobrutalis berupa garis tepi dan bayangan.

BadgeSecondaryDestructiveOutline

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

export function BadgeDemo() {

Badge adalah label sebaris yang ringkas — <span> polos tanpa primitif di baliknya, ditata dengan resep neobrutalis: garis tepi tebal, bayangan keras, dan tipografi tebal. Prop render (melalui useRender dari Base UI) memungkinkan elemen apa pun — tautan, tombol — mengenakan gaya badge.

Gunakan saat:

Status — "Active", "Draft", "Failed" pada baris tabel dan kartu; destructive untuk error.
Jumlah — pesan belum dibaca, item keranjang, total notifikasi di samping label navigasi.
Tag dan metadata — kategori pada kartu blog, tingkatan paket, label versi di dokumentasi.

Instalasi


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/badge.json
npx shadcn@latest add https://neobrutalism.com/r/base/badge.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/badge.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/badge.json

Salin dan tempel kode berikut ke proyek Anda.

components/ui/badge.tsx

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { Slot } from "radix-ui"

import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded border-2 px-2 py-0.5 text-xs font-head font-medium whitespace-nowrap shadow-sm transition-all focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive [&>svg]:pointer-events-none [&>svg]:size-3!",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
        secondary:
          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
        destructive:
          "bg-destructive text-destructive-foreground [a]:hover:bg-destructive/90",
        outline:
          "bg-transparent text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
        ghost:
          "border-transparent bg-transparent shadow-none hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
        link: "border-transparent bg-transparent shadow-none text-primary underline-offset-4 hover:underline",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

function Badge({
  className,
  variant = "default",
  asChild = false,
  ...props
}: React.ComponentProps<"span"> &
  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
  const Comp = asChild ? Slot.Root : "span"

  return (
    <Comp
      data-slot="badge"
      data-variant={variant}
      className={cn(badgeVariants({ variant }), className)}
      {...props}
    />
  )
}

export { Badge, badgeVariants }

Perbarui jalur import agar sesuai dengan struktur proyek Anda.

Penggunaan

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

<Badge variant="default | outline | secondary | destructive">Badge</Badge>

Contoh

Varian

Gunakan prop variant untuk mengubah varian badge.

DefaultSecondaryDestructiveOutlineGhost

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

export function BadgeVariants() {

Dengan Ikon

Anda bisa merender ikon di dalam badge. Gunakan data-icon="inline-start" untuk merender ikon di kiri dan data-icon="inline-end" untuk merender ikon di kanan.

VerifiedBookmark

import { BadgeCheck, BookmarkIcon } from "lucide-react"

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

Dengan Spinner

Anda bisa merender spinner di dalam badge. Ingat untuk menambahkan prop data-icon="inline-start" atau data-icon="inline-end" pada spinner.

DeletingGenerating

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

Link

Gunakan prop render untuk merender link sebagai badge.

Open Link

import { ArrowUpRightIcon } from "lucide-react"

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

Warna Kustom

Anda bisa menyesuaikan warna badge dengan menambahkan kelas kustom seperti bg-chart-2 text-primary-foreground ke komponen Badge.

InfoSuccessFeaturedNewError

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

export function BadgeCustomColors() {

RTL

Untuk mengaktifkan dukungan RTL di Neobrutalism, lihat panduan konfigurasi RTL.

شارةثانويمدمرمخططمتحققإشارة مرجعية

"use client"

import * as React from "react"

Aksesibilitas

Badge merender <span> polos — pembaca layar hanya menerima teksnya, tidak lebih, jadi jangan biarkan warna sendirian membawa makna: variant="destructive" diumumkan sama persis dengan default, teksnyalah yang harus mengatakan "Failed". Angka telanjang butuh konteks — tambahkan aria-label atau teks yang tersembunyi secara visual agar "3" terbaca sebagai "3 notifikasi belum dibaca". Saat dirender sebagai tautan lewat prop render, ia menjadi anchor biasa dan semantik tautan pada umumnya berlaku.

Referensi API

Badge

Komponen Badge menampilkan badge atau komponen yang tampak seperti badge.

Prop	Type	Default
`variant`	`"default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| "link"`	`"default"`
`className`	`string`	-