Badge

Key Value Badge

Плашка «ключ: значение» для служебных данных: ключ не выделяется мышью, значение выделяется целиком одним щелчком.

badge
key-value
metadata
copy

Превью

1440pxHost theme

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

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

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

Ключ

Значение

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

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

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

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

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

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

## 2. Что это
Плашка «ключ: значение» для служебных данных: ключ не выделяется мышью, значение выделяется целиком одним щелчком.

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

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

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

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

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

## 5. Сохранить как установлено
- локальную палитру --vibeui-badge-025-* и не подменять её токенами вашей темы
- user-select:none у ключа: иначе в буфер уезжает подпись вместе со значением
- user-select:all у значения — ради него плашка и существует, хеш не ведут мышью по символам
- моноширинный шрифт значения: идентификаторы сравнивают глазами, и «0» с «O» обязаны различаться
- контраст тёмного ключа и светлого значения: без смены фона граница зон исчезает
- aria-label на всей плашке: «commit a1f9c02» без двоеточия звучит как два разных слова

## 6. Можно менять
- подпись через label
- значение через value
- цвета зон в переменных key-bg и value-bg
- радиус и высоту плашки в правилах блока

## 7. Правила
- user-select:all выделяет узел целиком: часть значения мышью выбрать уже не получится — это осознанный обмен.
- Копирование остаётся ручным: кнопки с буфером обмена здесь нет, иначе компоненту понадобился бы клиентский JS.
- Длинное значение обрезается многоточием — полное лежит в title, но на тачскрине подсказки нет.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

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

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

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

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

Один файл, ноль зависимостей, палитра в локальных переменных --vibeui-badge-025-*. Серверный: хуков нет. Две зоны в одной рамке с общим overflow:hidden: тёмный ключ и светлое значение, граница между ними — смена фона, а не линия. Ключ помечен user-select:none, значение — user-select:all, поэтому щелчок по хешу выделяет ровно хеш, и в буфер не уезжает слово «commit» вместе с ним. Значение набрано моноширинным шрифтом и обрезается многоточием, полное — в title. Обе зоны под aria-hidden, вся плашка объявляется одной фразой через aria-label.

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

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

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Badge025Props = Omit<
  ComponentPropsWithoutRef<"span">,
  "children"
> & {
  label?: string
  value?: string
}

// Идея компонента: плашка «ключ: значение» для служебных данных — хеша
// коммита, номера сборки, идентификатора заказа. Ключ помечен user-select:none,
// значение — user-select:all, поэтому одним щелчком выделяется ровно то, что
// собираются скопировать, и в буфер не уезжает слово «commit» вместе с хешем.
const STYLES = `
:where([data-vibeui-block="badge-025"]){
--vibeui-badge-025-key-bg:oklch(0.38 0.016 265);
--vibeui-badge-025-key-fg:oklch(0.96 0.004 265);
--vibeui-badge-025-value-bg:oklch(0.97 0.004 265);
--vibeui-badge-025-value-fg:oklch(0.28 0.016 265);
--vibeui-badge-025-border:oklch(0.38 0.016 265);
--vibeui-badge-025-font:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
[data-vibeui-block="badge-025"]{
display:inline-flex;align-items:stretch;box-sizing:border-box;
height:1.5rem;max-width:100%;
border:1px solid var(--vibeui-badge-025-border);border-radius:0.3125rem;
font-family:var(--vibeui-badge-025-font);font-size:0.6875rem;line-height:1;
vertical-align:middle;overflow:hidden;
}
[data-vibeui-block="badge-025"] [data-part="key"]{
display:inline-flex;align-items:center;flex:none;padding:0 0.5rem;
background:var(--vibeui-badge-025-key-bg);color:var(--vibeui-badge-025-key-fg);
font-weight:600;letter-spacing:0.04em;
/* Подпись не выделяется: в буфер должно уходить только значение. */
user-select:none;-webkit-user-select:none;
}
[data-vibeui-block="badge-025"] [data-part="value"]{
display:inline-flex;align-items:center;min-width:0;padding:0 0.5rem;
background:var(--vibeui-badge-025-value-bg);color:var(--vibeui-badge-025-value-fg);
font-weight:600;
/* Один щелчок выделяет значение целиком — хеш не приходится вести мышью. */
user-select:all;-webkit-user-select:all;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="badge-025"] *{animation:none!important;transition:none!important}}
`

/**
 * Плашка «ключ: значение»: выделяется и копируется только значение.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Badge025({
  label = "commit",
  value = "a1f9c02",
  className,
  style,
  ...props
}: Badge025Props) {
  return (
    <>
      <style href="vibeui-badge-025" precedence="medium">
        {STYLES}
      </style>
      <span
        {...props}
        data-vibeui-block="badge-025"
        className={className}
        style={style as CSSProperties}
        aria-label={`${label}: ${value}`}
      >
        <span data-part="key" aria-hidden="true">
          {label}
        </span>
        <span data-part="value" aria-hidden="true" title={value}>
          {value}
        </span>
      </span>
    </>
  )
}