Badge

Status Badge

Плашка статуса, в которой цвет несёт только точка. В таблице из двадцати строк статусы остаются заметными, но не превращают её в светофор.

badge
status
label
table

Превью

1440pxHost theme

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

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

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

Опубликовано

Текст

Тон

Размер

Точка

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

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

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

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

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

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

## 2. Что это
Плашка статуса, в которой цвет несёт только точка. В таблице из двадцати строк статусы остаются заметными, но не превращают её в светофор.

Статусная плашка: нейтральный фон, цветная точка, текст. Пять тонов (neutral, success, warning, danger, info) переключают только цвет точки, поэтому список из многих строк остаётся спокойным. Два размера. Ноль зависимостей, один файл, своя палитра.

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

<Badge001 tone="success">Опубликовано</Badge001>

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

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

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

## 5. Сохранить как установлено
- локальную палитру --vibeui-badge-001-* и не подменять её токенами вашей темы (bg-secondary, text-muted-foreground и подобными)
- главное решение: тон меняет цвет точки, а не заливку плашки — заливка по тону превращает таблицу в светофор
- точку как отдельный элемент с aria-hidden: смысл несёт текст, точка только помогает его найти
- нейтральные фон и рамку во всех тонах
- inline-flex и vertical-align:middle — плашка обязана стоять в строке текста, не ломая её
- белое пространство: white-space:nowrap, иначе статус из двух слов переносится посреди плашки
- блок <style> внутри компонента — в нём вся палитра и размеры

## 6. Можно менять
- текст статуса через children
- tone: neutral, success, warning, danger, info
- size: md в тексте и карточках, sm в плотной таблице
- dot: выключите точку, если плашка используется как ярлык, а не как статус
- внешние отступы через className

## 7. Правила
- Не кладите внутрь ссылку или кнопку: это подпись, а не элемент управления.
- Не полагайтесь на цвет точки как на единственный признак — текст обязателен, иначе статус не прочитают ни дальтоник, ни скринридер.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

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

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

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

https://vibeui.ru/r/badge-001.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-badge-001-*. Пять тонов переключаются data-атрибутом и меняют только переменную точки — фон и рамка остаются нейтральными во всех состояниях. Это inline-элемент: он встаёт в строку рядом с текстом и в ячейку таблицы.

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

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

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Badge001Tone = "neutral" | "success" | "warning" | "danger" | "info"

export type Badge001Props = ComponentPropsWithoutRef<"span"> & {
  tone?: Badge001Tone
  /** Точка-индикатор слева. Без неё остаётся просто плашка с текстом. */
  dot?: boolean
  size?: "sm" | "md"
}

// Идея компонента: цвет несёт точка, а не вся плашка. В таблице из двадцати
// строк пять разноцветных заливок читаются как авария; нейтральная плашка с
// цветной точкой оставляет статус заметным, но не кричащим.
const STYLES = `
:where([data-vibeui-block="badge-001"]){
--vibeui-badge-001-fg:oklch(0.32 0.014 265);
--vibeui-badge-001-bg:oklch(0.96 0.004 265);
--vibeui-badge-001-border:oklch(0.89 0.006 265);
--vibeui-badge-001-dot:oklch(0.62 0.014 265);
--vibeui-badge-001-radius:9999px;
--vibeui-badge-001-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="badge-001"]{
display:inline-flex;align-items:center;gap:0.4375rem;
height:1.5rem;padding:0 0.625rem;
border:1px solid var(--vibeui-badge-001-border);
border-radius:var(--vibeui-badge-001-radius);
background:var(--vibeui-badge-001-bg);color:var(--vibeui-badge-001-fg);
font-family:var(--vibeui-badge-001-font);font-size:0.75rem;font-weight:500;
line-height:1;white-space:nowrap;vertical-align:middle;
}
[data-vibeui-block="badge-001"][data-size="sm"]{height:1.25rem;padding:0 0.5rem;font-size:0.6875rem;gap:0.375rem}
[data-vibeui-block="badge-001"] [data-part="dot"]{
width:0.375rem;height:0.375rem;flex:none;border-radius:9999px;
background:var(--vibeui-badge-001-dot);
}
[data-vibeui-block="badge-001"][data-size="sm"] [data-part="dot"]{width:0.3125rem;height:0.3125rem}
[data-vibeui-block="badge-001"][data-tone="success"]{--vibeui-badge-001-dot:oklch(0.63 0.17 152)}
[data-vibeui-block="badge-001"][data-tone="warning"]{--vibeui-badge-001-dot:oklch(0.75 0.16 75)}
[data-vibeui-block="badge-001"][data-tone="danger"]{--vibeui-badge-001-dot:oklch(0.58 0.2 25)}
[data-vibeui-block="badge-001"][data-tone="info"]{--vibeui-badge-001-dot:oklch(0.58 0.18 262)}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="badge-001"] *{animation:none!important;transition:none!important}}
`

/**
 * Статусная плашка, в которой цвет несёт только точка.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Badge001({
  tone = "success",
  dot = true,
  size = "md",
  className,
  style,
  children = "Опубликовано",
  ...props
}: Badge001Props) {
  return (
    <>
      <style href="vibeui-badge-001" precedence="medium">
        {STYLES}
      </style>
      <span
        {...props}
        data-vibeui-block="badge-001"
        data-tone={tone}
        data-size={size}
        className={className}
        style={style as CSSProperties}
      >
        {dot ? <span data-part="dot" aria-hidden="true" /> : null}
        {children}
      </span>
    </>
  )
}