Badge

Env Badge

Метка окружения, где смысл несёт силуэт: боевое — скошенный ярлык, предпродакшен — пилюля, разработка — пунктирный прямоугольник.

badge
environment
shape
devops

Превью

1440pxHost theme

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

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

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

prod

Окружение

Подпись

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

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

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

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

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

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

## 2. Что это
Метка окружения, где смысл несёт силуэт: боевое — скошенный ярлык, предпродакшен — пилюля, разработка — пунктирный прямоугольник.

Метка окружения, у которой prod, stage и dev отличаются формой плашки, а не только цветом. Ноль зависимостей, один файл, клиентского JS нет.

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

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

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

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

## 5. Сохранить как установлено
- локальную палитру --vibeui-badge-021-* и не подменять её токенами вашей темы
- разную форму окружений: на пересжатом скриншоте цвет уходит, силуэт остаётся
- отсутствие рамки у prod: clip-path срезает обводку вместе с углом и оставляет рваный край
- моноширинный верхний регистр: метка обязана читаться как техническая, а не как статус записи
- самый заметный тон именно у prod — ошибиться окружением дороже всего
- собственную подложку плашки: без неё метка теряется на любой карточке

## 6. Можно менять
- окружение через env
- подпись через label
- цвета окружений в правилах data-env
- величину среза в clip-path у prod

## 7. Правила
- Подпись не выводится из env: label задаётся отдельно, чтобы «прод» и «prod» были вопросом текста, а не кода.
- Окружений три: четвёртому нужна собственная форма, иначе идея «форма = смысл» рассыпается.
- clip-path режет и фон, и тень: не вешайте на prod внешнюю тень — она обрежется по тому же контуру.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

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

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

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

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

Один файл, ноль зависимостей, палитра в локальных переменных --vibeui-badge-021-*. Серверный: хуков нет. Атрибут data-env меняет не только цвета, но и форму: у prod clip-path срезает углы и рамка убирается (обводку всё равно срезало бы вместе с углом), у stage радиус уходит в пилюлю, у dev рамка становится пунктирной. Шрифт моноширинный и в верхнем регистре с разрядкой: метка окружения читается как техническая, а не как статус записи. На скриншоте в баг-репорте цвет теряется первым, а силуэт остаётся — перепутанное окружение стоит дороже любой другой ошибки метки.

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

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

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Badge021Env = "prod" | "stage" | "dev"

export type Badge021Props = ComponentPropsWithoutRef<"span"> & {
  env?: Badge021Env
  label?: string
}

// Идея компонента: метка окружения, где смысл несёт форма. Боевое — плотный
// скошенный ярлык, предпродакшен — обычная пилюля, разработка — пунктирный
// прямоугольник. На скриншоте в баг-репорте цвет теряется первым, а силуэт
// остаётся: перепутанное окружение стоит дороже любой другой ошибки метки.
const STYLES = `
:where([data-vibeui-block="badge-021"]){
--vibeui-badge-021-bg:oklch(0.97 0.004 265);
--vibeui-badge-021-fg:oklch(0.36 0.014 265);
--vibeui-badge-021-border:oklch(0.86 0.008 265);
--vibeui-badge-021-font:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
[data-vibeui-block="badge-021"]{
display:inline-flex;align-items:center;box-sizing:border-box;
height:1.5rem;padding:0 0.625rem;
border:1px solid var(--vibeui-badge-021-border);border-radius:0.25rem;
background:var(--vibeui-badge-021-bg);color:var(--vibeui-badge-021-fg);
font-family:var(--vibeui-badge-021-font);font-size:0.6875rem;font-weight:700;line-height:1;
letter-spacing:0.09em;text-transform:uppercase;vertical-align:middle;
}
/* Боевое: скошенный ярлык. Рамки нет — clip-path срезал бы её вместе с углом. */
[data-vibeui-block="badge-021"][data-env="prod"]{
--vibeui-badge-021-bg:oklch(0.5 0.18 25);
--vibeui-badge-021-fg:oklch(0.99 0.01 25);
border-color:transparent;border-radius:0;padding:0 0.875rem;
clip-path:polygon(0.4rem 0,100% 0,calc(100% - 0.4rem) 100%,0 100%);
}
/* Предпродакшен: обычная пилюля — промежуточная форма между двумя крайними. */
[data-vibeui-block="badge-021"][data-env="stage"]{
--vibeui-badge-021-bg:oklch(0.96 0.05 80);
--vibeui-badge-021-fg:oklch(0.42 0.09 70);
--vibeui-badge-021-border:oklch(0.85 0.09 80);
border-radius:9999px;
}
/* Разработка: пунктир, «ещё не настоящее». */
[data-vibeui-block="badge-021"][data-env="dev"]{
--vibeui-badge-021-bg:oklch(0.98 0.003 265);
--vibeui-badge-021-fg:oklch(0.48 0.014 265);
border-style:dashed;
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="badge-021"] *{animation:none!important;transition:none!important}}
`

/**
 * Метка окружения: prod, stage и dev отличаются силуэтом, а не только цветом.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Badge021({
  env = "prod",
  label = "prod",
  className,
  style,
  ...props
}: Badge021Props) {
  return (
    <>
      <style href="vibeui-badge-021" precedence="medium">
        {STYLES}
      </style>
      <span
        {...props}
        data-vibeui-block="badge-021"
        data-env={env}
        className={className}
        style={style as CSSProperties}
      >
        {label}
      </span>
    </>
  )
}