Feedback
Badge
Small labels that give your interface a little context.
Use it in your project
Install oscl-ui from npm and import oscl-ui/styles.css once. See installation.
badge-example.tsx
import { Badge } from "oscl-ui";
<Badge variant="success">Ready to ship</Badge>Accessibility
Keep visible labels and keyboard focus. Supply an accessible name to icon-only actions. Try this preview with Tab, Enter, Space, and Escape where appropriate.
The source, in full
This is the actual source from the isolated OSCL package used by this website. Native props and TypeScript declarations are included in the npm package.
badge.tsx
"use client";
import type { HTMLAttributes } from "react";
export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
variant?: "neutral" | "success" | "warning" | "error";
}
export function Badge({ variant = "neutral", className = "", ...props }: BadgeProps) {
return <span {...props} className={`oscl-badge oscl-badge--${variant} ${className}`} />;
}