VibeUI

Badge

Icon Badge

A badge with a mark on the left: the icon is sized in em, so it scales with the caption and never gets squashed by a long text.

  • badge
  • icon
  • status
  • label

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-013?lang=en

Paid
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-013" (Icon 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-013.json

Registry item: https://vibeui.ru/r/badge-013.json
Installs to: components/vibeui/badge-013.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 badge with a mark on the left: the icon is sized in em, so it scales with the caption and never gets squashed by a long text.

A badge with a leading icon: the mark scales with the text and the whole tone is derived from a single hue. Zero dependencies, one file, no client JS.

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

<Badge013 icon="check" tone="positive">
  Paid
</Badge013>

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-013-* palette — do not swap it for your theme tokens
- the icon size in em: in rem the mark stops matching the caption at another font size
- flex:none on the icon — otherwise a long caption squashes the mark into an oval
- the optical margin-top on the mark: without it the icon sits below the text
- aria-hidden on the icon: it repeats the caption and is noise in the accessible name
- the badge's own light surface: without it the dark text disappears on a dark background

## 6. You may change
- the set of marks in the ICONS map
- the chosen mark through icon
- the tone through tone
- the caption through children

## 7. Rules
- There are four marks in the set: a fifth one is a path in ICONS, not an icon library import.
- The icon does not replace the caption: a badge without text stops being readable without a hover.
- The tone changes hue and chroma but not lightness: contrast holds as long as it stays at 0.34.
- 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-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 — смысл несёт подпись, дублировать его нечем.

Component source

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

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