Status Badge

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

# Install and place "badge-001" (Status 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-001.json

Registry item: https://vibeui.ru/r/badge-001.json
Installs to: components/vibeui/badge-001.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 status badge where only the dot carries colour. Across twenty table rows the statuses stay findable without turning the table into a set of traffic lights.

A status badge: neutral background, a coloured dot, a label. Five tones (neutral, success, warning, danger, info) change the dot alone, so a long list stays calm. Two sizes. Zero dependencies, one file, its own palette.

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

<Badge001 tone="success">Published</Badge001>

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-001-* palette — do not swap it for your theme tokens (bg-secondary, text-muted-foreground and the like)
- the core decision: the tone colours the dot, not the fill — filled tones turn a table into traffic lights
- the dot as a separate aria-hidden element: the text carries the meaning, the dot only helps find it
- the neutral background and border across every tone
- inline-flex and vertical-align:middle — the badge has to sit in a line of text without breaking it
- white-space:nowrap, otherwise a two-word status wraps inside the pill
- the <style> block inside the component — it holds the palette and the sizes

## 6. You may change
- the status text through children
- tone: neutral, success, warning, danger, info
- size: md in text and cards, sm in a dense table
- dot: turn it off when the badge is a tag rather than a status
- outer spacing through className

## 7. Rules
- Do not put a link or a button inside: this is a label, not a control.
- Never rely on the dot colour alone — the text is required, or neither a colour-blind reader nor a screen reader gets the status.
- 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.