UI Skillbook
2

Badge

A compact label for a status, category, plan or count, with semantic colour variants and fixed sizes.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-badge and follow the Siteplane Badge skill it prints for this task.

Paste this into your agent.

Badge tags a piece of content with a short word or number, such as Draft, Paid, New or an unread count. It also covers status-with-dot text, plan entitlements and a verified mark on an avatar.

Install

bashnpx shadcn@4.18.0 add @siteplane/badge

Import it from @/siteplane/components/badge. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Tag Group: Pick Tag Group when the labels can be selected, removed or navigated with the keyboard.
  • vs Marker: Pick Marker for a quiet status line inside a chat thread rather than a chip on a row.

Rules

  • Choose variant by meaning (success, warning, error, info, accent, secondary and so on) and keep a visible word beside the colour.
  • Use profile="status" for a coloured dot followed by the state in words, and profile="count" for a notification number that never truncates.
  • Give a count badge a contextual accessible name with hidden text, and hide decorative icons and dots from assistive technology.
  • Make a badge a link with render. Without it the badge is a plain, non-interactive span, so don't use it as a button.
  • Reserve light for the single announcement on a page, on an opaque variant.

Reference

  • Badge docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Data display. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-badge

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Better Colorsby jakubkrehel

OKLCH color space for web projects. Convert hex/rgb/hsl to oklch, generate palettes, check contrast, handle gamut boundaries, and theme with Tailwind v4. Triggers on oklch, color conversion, palette generation, contrast ratio, gamut, display p3, design tokens, hue drift, chroma, dark mode colors.

VisualExternalGitHub stars: 9.2K

Better Interfaceby jakubkrehel

Run a holistic interface review across accessibility, layout, writing, typography, color, and visual polish.

VisualExternalGitHub stars: 9.2K

Better Typographyby jakubkrehel

Web typography from choosing fonts to spacing, wrapping and accessibility. Use when picking or pairing typefaces, configuring variable fonts or OpenType features, setting up a type scale, styling text in components, truncating text, styling underlines, selection, placeholders or carets, or reviewing frontend code for typography. Triggers on typography, fonts, font formats, woff2, variable fonts, font-weight, opentype, font-feature-settings, letter-spacing, line-height, type scale, tabular numbers, text-wrap, truncation, line clamp, underlines, text-decoration, text selection, iOS input zoom, font smoothing, text contrast, measure, line length, text-box, smart punctuation, drop cap.

TypographyExternalGitHub stars: 9.2K

Color Contrast for Taste, Not Just Complianceby UI Skillbook

Use accessible contrast ratios as a floor, then build restrained hierarchy on top of them rather than treating them as the whole job.

Visual

Back to Siteplane UI