VibeUI

Badge

Icon Badge

Плашка со знаком слева: иконка задана в em, поэтому едет вместе с подписью и не сплющивается, когда текст длинный.

  • badge
  • icon
  • status
  • label

Превью

1440pxHost theme

Использовать с AI

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из registry.

размести это в шапке: https://vibeui.ru/c/badge-013

Оплачено
Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

# Установка и размещение «badge-013» (Icon Badge) из VibeUI

## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/badge-013.json

Registry item: https://vibeui.ru/r/badge-013.json
Ставится в: components/vibeui/badge-013.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.

Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.

## 2. Что это
Плашка со знаком слева: иконка задана в em, поэтому едет вместе с подписью и не сплющивается, когда текст длинный.

Плашка с иконкой слева: знак масштабируется вместе с текстом, а весь тон выводится из одного оттенка. Ноль зависимостей, один файл, клиентского JS нет.

## 3. Как использовать
import { Badge013 } from "@/components/vibeui/badge-013"

<Badge013 icon="check" tone="positive">
  Оплачено
</Badge013>

Полный список пропсов — в установленном файле.

## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.

Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)

## 5. Сохранить как установлено
- локальную палитру --vibeui-badge-013-* и не подменять её токенами вашей темы
- размер иконки в em: в rem знак перестаёт совпадать с подписью при другом кегле
- flex:none на иконке — иначе длинная подпись сплющит знак в овал
- оптический сдвиг margin-top у знака: без него иконка садится ниже текста
- aria-hidden на иконке: она повторяет подпись и в доступном имени лишняя
- собственную светлую подложку плашки: без неё тёмный текст пропадает на тёмном фоне

## 6. Можно менять
- набор знаков в карте ICONS
- выбранный знак через icon
- тон через tone
- подпись через children

## 7. Правила
- Знаков в наборе четыре: пятый добавляется путём в ICONS, а не импортом библиотеки иконок.
- Иконка не заменяет подпись: плашка без текста перестаёт читаться без наведения.
- Тон меняет оттенок и насыщенность, но не светлоту: контраст держится, пока она остаётся 0.34.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/badge-013.json
https://vibeui.ru/r/badge-013.json

Один файл, ноль зависимостей, палитра в локальных переменных --vibeui-badge-013-*. Серверный: хуков нет. Знаки — inline SVG из карты ICONS, размер width/height в 1em и flex:none, оптический сдвиг margin-top:-0.0625em ставит знак на середину строчной высоты. Тон переключается атрибутом data-tone, который меняет только --hue и --chroma: фон, текст, рамка и цвет знака считаются из них в oklch, поэтому новый тон добавляется одной строкой. Иконка помечена aria-hidden — смысл несёт подпись, дублировать его нечем.

Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

import type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from "react"

export type Badge013Icon = "check" | "clock" | "alert" | "spark"

export type Badge013Props = ComponentPropsWithoutRef<"span"> & {
  icon?: Badge013Icon
  tone?: "neutral" | "positive" | "warning" | "accent"
}

// Идея компонента: плашка, у которой слева стоит знак. Иконка живёт в тех же
// единицах, что и текст: размер в em, оптический сдвиг вверх на пол-пикселя,
// flex:none — поэтому она не разъезжается при смене размера шрифта и не
// сжимается, когда подпись длинная.
const STYLES = `
:where([data-vibeui-block="badge-013"]){
--vibeui-badge-013-hue:265;
--vibeui-badge-013-chroma:0.014;
--vibeui-badge-013-bg:oklch(0.96 calc(var(--vibeui-badge-013-chroma) * 0.5) var(--vibeui-badge-013-hue));
--vibeui-badge-013-fg:oklch(0.34 var(--vibeui-badge-013-chroma) var(--vibeui-badge-013-hue));
--vibeui-badge-013-mark:oklch(0.52 calc(var(--vibeui-badge-013-chroma) * 1.6) var(--vibeui-badge-013-hue));
--vibeui-badge-013-border:oklch(0.89 calc(var(--vibeui-badge-013-chroma) * 0.8) var(--vibeui-badge-013-hue));
--vibeui-badge-013-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="badge-013"]{
display:inline-flex;align-items:center;gap:0.375em;
max-width:100%;box-sizing:border-box;
height:1.75rem;padding:0 0.6875rem;
border:1px solid var(--vibeui-badge-013-border);border-radius:9999px;
background:var(--vibeui-badge-013-bg);color:var(--vibeui-badge-013-fg);
font-family:var(--vibeui-badge-013-font);font-size:0.75rem;font-weight:600;line-height:1;
vertical-align:middle;
}
[data-vibeui-block="badge-013"] [data-part="icon"]{
/* Размер в em, а не в rem: знак обязан ехать вместе с подписью. */
width:1em;height:1em;flex:none;
margin-top:-0.0625em;
color:var(--vibeui-badge-013-mark);
}
[data-vibeui-block="badge-013"] [data-part="text"]{
min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
[data-vibeui-block="badge-013"][data-tone="positive"]{--vibeui-badge-013-hue:150;--vibeui-badge-013-chroma:0.05}
[data-vibeui-block="badge-013"][data-tone="warning"]{--vibeui-badge-013-hue:75;--vibeui-badge-013-chroma:0.07}
[data-vibeui-block="badge-013"][data-tone="accent"]{--vibeui-badge-013-hue:265;--vibeui-badge-013-chroma:0.06}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="badge-013"] *{animation:none!important;transition:none!important}}
`

const ICONS: Record<Badge013Icon, ReactNode> = {
  check: <path d="M4 12.5 9 17.5 20 6.5" />,
  clock: <path d="M12 6.5V12l4 2.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />,
  alert: <path d="M12 4.5v9m0 4.5v.5M12 4.5 12 4.5" />,
  spark: <path d="M12 3.5 14 10l6.5 2-6.5 2-2 6.5-2-6.5L3.5 12l6.5-2 2-6.5Z" />,
}

/**
 * Плашка со знаком слева: иконка масштабируется вместе с текстом.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Badge013({
  icon = "check",
  tone = "positive",
  className,
  style,
  children = "Оплачено",
  ...props
}: Badge013Props) {
  return (
    <>
      <style href="vibeui-badge-013" precedence="medium">
        {STYLES}
      </style>
      <span
        {...props}
        data-vibeui-block="badge-013"
        data-tone={tone}
        className={className}
        style={style as CSSProperties}
      >
        <svg
          data-part="icon"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2.2"
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-hidden="true"
          focusable="false"
        >
          {ICONS[icon]}
        </svg>
        <span data-part="text">{children}</span>
      </span>
    </>
  )
}