Перейти до вмісту
1.6k

Значок

Невеликі мітки для статусів, кількості та тегів на картках, таблицях та елементах навігації — з необруталістичним оформленням у вигляді рамок і тіней.

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

export function BadgeDemo() {

Badge — компактна вбудована мітка: звичайний <span> без примітиву під ним, оформлений за рецептом необруталізму: товсті рамки, різкі тіні та масивний шрифт. Проп render (через Base UI useRender) дозволяє будь-якому елементу — посиланню, кнопці — носити стилі badge.

Коли це стане в пригоді:

  • Статуси — «Active», «Draft», «Failed» у рядках таблиць і на картках; destructive для помилок.
  • Лічильники — непрочитані повідомлення, товари в кошику, суми сповіщень біля пунктів навігації.
  • Теги та метадані — категорії на картках блогу, тарифи планів, мітки версій у документації.

Встановлення

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

Скопіюйте та вставте наведений нижче код у свій проєкт.

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 }

Оновіть шляхи імпорту відповідно до структури вашого проєкту.

Використання

import { Badge } from "@/components/ui/badge"
<Badge variant="default | outline | secondary | destructive">Badge</Badge>

Приклади

Варіанти

Використайте проп variant, щоб змінити варіант badge.

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

export function BadgeVariants() {

З іконкою

Ви можете відрендерити іконку всередині badge. Використайте data-icon="inline-start", щоб відрендерити іконку ліворуч, і data-icon="inline-end", щоб відрендерити іконку праворуч.

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

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

Зі спінером

Ви можете відрендерити спінер всередині badge. Не забудьте додати спінеру проп data-icon="inline-start" або data-icon="inline-end".

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

Посилання

Використайте проп render, щоб відрендерити посилання як badge.

import { ArrowUpRightIcon } from "lucide-react"

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

Власні кольори

Ви можете налаштувати кольори badge, додавши власні класи, як-от bg-chart-2 text-primary-foreground, до компонента Badge.

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

export function BadgeCustomColors() {

RTL

Щоб увімкнути підтримку RTL у Neobrutalism, перегляньте посібник з налаштування RTL.

"use client"

import * as React from "react"

Доступність

Badge рендерить звичайний <span> — програми зчитування з екрана отримують лише його текст, тож не покладайте зміст лише на колір: variant="destructive" оголошується так само, як default, текст має казати «Failed». Голим лічильникам потрібен контекст — додайте aria-label або візуально прихований текст, щоб «3» читалося як «3 непрочитані сповіщення». Коли badge відрендерено як посилання через проп render, це звичайний якір зі стандартною семантикою посилання.

Довідник API

Badge

Компонент Badge показує badge або компонент, схожий на badge.

PropTypeDefault
variant"default" | "secondary" | "destructive" | "outline" | "ghost" | "link""default"
classNamestring-