VibeUI

Badge

Key Value Badge

A key-value badge for technical data: the key cannot be selected with the mouse, the value is selected whole in a single click.

  • badge
  • key-value
  • metadata
  • copy

Preview

1440pxHost theme

Use it with AI

  1. 1. Copy the link.
  2. 2. Write to your agent in your own words and drop the link into the sentence.
  3. 3. The agent opens the link and installs the component from the registry.

put this in the header: https://vibeui.ru/c/badge-025?lang=en

Show the full instructions

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

# Install and place "badge-025" (Key Value Badge) from VibeUI

## 1. Install first — do not skip, do not recreate
Run this exact command before writing any code:
npx shadcn@latest add https://vibeui.ru/r/badge-025.json

Registry item: https://vibeui.ru/r/badge-025.json
Installs to: components/vibeui/badge-025.tsx (the exact path follows this project's components.json aliases).
npm dependencies: none.
Registry dependencies: none.

Install it from the registry. Do not recreate it from the description,
do not substitute a similar component from another library, and do not
rewrite it to match the project's existing style.

## 2. What it is
A key-value badge for technical data: the key cannot be selected with the mouse, the value is selected whole in a single click.

A key-value badge where only the value is selectable and copyable, while the key stays unselectable. Zero dependencies, one file, no client JS.

## 3. How to use it
import { Badge025 } from "@/components/vibeui/badge-025"

<Badge025 label="commit" value="a1f9c02" />

Read the installed file for the full prop list.

## 4. Where to place it
This is a small inline component. Put it exactly where the user asked,
inside the existing markup. Do not create a new page, section or
wrapper for it. If a similar control already sits in that spot,
replace it instead of adding a second one.

Placement: ___
(The user fills this line in. If it is still blank, ask where to put it
instead of guessing.)

## 5. Keep exactly as installed
- the local --vibeui-badge-025-* palette — do not swap it for your theme tokens
- user-select:none on the key: otherwise the caption travels to the clipboard with the value
- user-select:all on the value — the badge exists for it, nobody drags a mouse across a hash
- the monospace value: identifiers are compared by eye, and "0" must differ from "O"
- the contrast between the dark key and the light value: without the background change the zone boundary disappears
- the aria-label on the whole badge: "commit a1f9c02" without a colon sounds like two unrelated words

## 6. You may change
- the caption through label
- the value through value
- the zone colours in the key-bg and value-bg variables
- the badge radius and height in the block rules

## 7. Rules
- user-select:all selects the node as a whole: picking part of the value with the mouse is no longer possible — that is a deliberate trade.
- Copying stays manual: there is no clipboard button here, otherwise the component would need client JS.
- A long value is cut with an ellipsis — the full one lives in title, but touch screens have no tooltip.
- Do not lift the CSS variables into globals.css: the component has to stay a single file.

## 8. Verify
- it renders with no console errors;
- it looks like the preview on the VibeUI page you copied this from;
- if it does not, you changed something listed in section 5 — put it back.

For developers

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.

Component source

The same file your agent installs. Here in case you would rather copy it by hand.

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>
    </>
  )
}