Badge

Een klein label voor statussen, aantallen en tags op kaarten, tabellen en navigatie-items — met die neobrutalistische stijl van randen en schaduwen.

BadgeSecondaryDestructiveOutline

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

export function BadgeDemo() {

De badge is een compact inline label — een kale <span> zonder primitive eronder, vormgegeven volgens het neobrutalistische recept: dikke randen, harde schaduwen en vette typografie. Met de prop render (via useRender van Base UI) kan elk element — een link, een knop — de badge-stijl dragen.

Gebruik deze component bij:

Statussen — "Actief", "Concept", "Mislukt" op tabelrijen en cards; destructive voor fouten.
Aantallen — ongelezen berichten, artikelen in het winkelmandje, notificatietotalen naast navigatielabels.
Tags en metadata — categorieën op blogcards, abonnementsniveaus, versielabels in de docs.

Installatie


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

Kopieer en plak de volgende code in je project.

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 }

Werk de import-paden bij zodat ze overeenkomen met je projectstructuur.

Gebruik

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

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

Voorbeelden

Varianten

Gebruik de prop variant om de variant van de badge te wijzigen.

DefaultSecondaryDestructiveOutlineGhost

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

export function BadgeVariants() {

Met pictogram

Je kunt een pictogram binnen de badge renderen. Gebruik data-icon="inline-start" om het pictogram links te renderen en data-icon="inline-end" om het pictogram rechts te renderen.

VerifiedBookmark

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

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

Met spinner

Je kunt een spinner binnen de badge renderen. Vergeet niet om de prop data-icon="inline-start" of data-icon="inline-end" aan de spinner toe te voegen.

DeletingGenerating

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

Link

Gebruik de prop render om een link als badge te renderen.

Open Link

import { ArrowUpRightIcon } from "lucide-react"

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

Aangepaste kleuren

Je kunt de kleuren van een badge aanpassen door aangepaste klassen zoals bg-chart-2 text-primary-foreground aan de component Badge toe te voegen.

InfoSuccessFeaturedNewError

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

export function BadgeCustomColors() {

RTL

Om RTL-ondersteuning in Neobrutalism in te schakelen, zie de RTL-configuratiegids.

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

"use client"

import * as React from "react"

Toegankelijkheid

De badge rendert een kale <span> — schermlezers krijgen alleen de tekst, dus laat kleur nooit als enige de betekenis dragen: variant="destructive" klinkt hetzelfde als default; de tekst zelf moet "Mislukt" zeggen. Kale aantallen hebben context nodig — voeg een aria-label of visueel verborgen tekst toe, zodat "3" wordt voorgelezen als "3 ongelezen meldingen". Wordt de badge via de prop render als link gerenderd, dan is het een gewoon anker en geldt de gebruikelijke linksemantiek.

API-referentie

Badge

De component Badge toont een badge of een component die eruitziet als een badge.

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