Badge
Inline status or label indicator with semantic markup.
Preview
This preview uses documentation-only styling. Ship with one of the included recipe outputs (CSS, Tailwind, or UnoCSS) for production styles.
Badge renders a small inline label or status indicator with accessible semantics. It provides a headless primitive that carries semantic data attributes for styling integration with your design system.
Usage
Badge has a single Root part. Pass content as children.
import * as Badge from "@solidiom/badge"
;<Badge.Root>New</Badge.Root>Installation
Install the package with pnpm add @solidiom/badge. The package requires compatible solid-js and @solidjs/web peer dependencies.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | JSX.Element | — | Content to display inside the badge. |
class | string | — | Additional CSS class for styling. |
Styling
Badge carries data-scope="badge" and data-part="root" attributes. Style it with appropriate background colors, text colors, padding, and border-radius for your design system. The element renders as a <span>; apply your visual recipe using the data attributes for targeting.
Keyboard & behavior
This primitive has no keyboard interaction. It renders static content that does not receive focus or respond to key events.
SSR and hydration
Badge is a passive display element with no interactive state. It renders as static HTML and requires no client-side hydration.