Implementation:TobikoData Sqlmesh Common Badge
| Knowledge Sources | |
|---|---|
| Domains | Web_UI, Components |
| Last Updated | 2026-02-07 20:00 GMT |
Overview
A styled span element for displaying small, inline labels with customizable size and shape variants.
Description
The Badge component is a React component built on Radix UI's Slot primitive that renders inline labels with predefined styling. It uses class-variance-authority for variant management, supporting seven size options (2xs through 2xl) and three shape variants (square, round, pill). The component features monospace font styling, semibold weight, and custom CSS variables for background and foreground colors.
Usage
Use Badge to display status indicators, counts, categories, or tags in a consistent, compact format. The component supports the asChild pattern allowing composition with other components while maintaining styling. Default configuration provides small-sized (s) badges with rounded corners.
Code Reference
Source Location
- Repository: TobikoData_Sqlmesh
- File: web/common/src/components/Badge/Badge.tsx
Signature
export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
asChild?: boolean
size?: Size
shape?: Shape
}
export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
({ className, size, shape, asChild = false, ...props }, ref) => {
// Implementation
},
)
Import
import { Badge } from '@sqlmesh-common/components/Badge/Badge'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| asChild | boolean | No | If true, renders as Slot for composition (default: false) |
| size | Size | No | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' (default: 's') |
| shape | Shape | No | 'round' | 'pill' (default: 'round') |
| className | string | No | Additional CSS classes |
| children | React.ReactNode | No | Badge content |
| ref | React.Ref<HTMLSpanElement> | No | Forward ref to span element |
Outputs
| Name | Type | Description |
|---|---|---|
| element | React.ReactElement | Styled span or Slot element with badge styling |
Usage Examples
// Basic badge
<Badge>New</Badge>
// Custom size and shape
<Badge size="xs" shape="pill">
42
</Badge>
// Composition with asChild
<Badge asChild>
<a href="/link">Link Badge</a>
</Badge>
// All size options
<Badge size="2xs">Tiny</Badge>
<Badge size="xs">Extra Small</Badge>
<Badge size="s">Small (default)</Badge>
<Badge size="m">Medium</Badge>
<Badge size="l">Large</Badge>
<Badge size="xl">Extra Large</Badge>
<Badge size="2xl">2X Large</Badge>
// Shape variants
<Badge shape="square">Square</Badge>
<Badge shape="round">Round (default)</Badge>
<Badge shape="pill">Pill</Badge>