메인 콘텐츠로 이동

Badge

A small label that highlights status, category, or quantity.

Overview

Badge is a small inline element that communicates status, category, or numeric quantity. It supports semantic color variants, three sizes, and three shape options, covering the most common labeling patterns.
  • Use primary and secondary for neutral category labels or tags.
  • Semantic variants (success, error, warning, info) are ideal for status indicators.
  • The outline variant works well for subtle, low-emphasis labels.
  • Badge is a non-interactive display element — for clickable labels, use Button with an appropriate variant instead.

Accessibility

  • Badge renders as a <div> with no interactive role. Screen readers read the text content naturally.
  • When the badge content updates dynamically (e.g., a notification count), consider adding role="status" to announce changes to assistive technologies.
  • Ensure sufficient color contrast between the badge text and background, especially for the outline variant.

Import

import { Badge } from "@cocso-ui/react";

Variant

Seven color variants map to semantic meanings. Use primary and secondary for neutral labeling, and semantic variants for conveying status.

Size

Three sizes are available: large, medium, and small. The default is medium.

Shape

Three shape options adjust the border-radius. Use circle for numeric quantity badges.

API Reference

Badge

PropTypeDefaultDescription
variant"primary" | "secondary" | "success" | "error" | "warning" | "info" | "outline""secondary"Controls the background and text color to communicate semantic meaning. Use `secondary` for neutral labels and semantic variants for status indicators.
size"large" | "medium" | "small""medium"Controls the padding and font size. Use `small` for inline status indicators and `large` for prominent category labels.
shape"square" | "circle" | "rounded""square"Controls the border-radius. Use `circle` for numeric counts (e.g., notification badges) and `rounded` for pill-shaped tags.
children*ReactNode-The label text or elements rendered inside the badge.