Skip to content

← All components

Display and feedback

Badge

Compact semantic status label.

Live example

NeutralAccentInfoSuccessWarningDanger

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

tsx
import { Badge } from "@cofob/design-system-react";

/**
 * Complete Badge parameter reference.
 * @param tone
 *   type: "neutral" | "accent" | "info" | "success" | "warning" | "danger"
 *   default: "neutral"
 *   example: "success"
 * @param size
 *   type: "sm" | "md" | "lg" (plus heading sizes)
 *   default: "md"
 *   example: "md"
 * @param children
 *   type: ReactNode | Svelte Snippet | child HTML
 *   default: —
 *   example: children / snippet / child HTML
 */
export function BadgeExample() {
  return (
    <Badge>Content</Badge>
  );
}

Svelte

svelte
<script lang="ts">
  import { Badge } from "@cofob/design-system-svelte";

  // Complete Badge parameter reference.
  // tone
  //   type: "neutral" | "accent" | "info" | "success" | "warning" | "danger"
  //   default: "neutral"
  //   example: "success"
  // size
  //   type: "sm" | "md" | "lg" (plus heading sizes)
  //   default: "md"
  //   example: "md"
  // variant
  //   type: "soft" | "solid" | "outline" (Svelte)
  //   default: "soft" (Svelte)
  //   example: "secondary"
  // children
  //   type: ReactNode | Svelte Snippet | child HTML
  //   default: —
  //   example: children / snippet / child HTML
</script>

<Badge>Content</Badge>

HTML

html
<!--
  Complete Badge parameter reference.
  tone
    type: "neutral" | "accent" | "info" | "success" | "warning" | "danger"
    default: "neutral"
    example: "success"
  size
    type: "sm" | "md" | "lg" (plus heading sizes)
    default: "md"
    example: "md"
  variant
    type: "soft" | "solid" | "outline" (Svelte)
    default: "soft" (Svelte)
    example: "secondary"
  children
    type: ReactNode | Svelte Snippet | child HTML
    default: —
    example: children / snippet / child HTML
-->
<span class="cf-badge" data-tone="success">Ready</span>

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

ParameterTypeDefaultAdaptersExampleDescription
tone"neutral" | "accent" | "info" | "success" | "warning" | "danger""neutral"React · Svelte · HTML"success"Applies semantic color intent without hard-coded colors.
size"sm" | "md" | "lg" (plus heading sizes)"md"React · Svelte · HTML"md"Applies a design-system size token.
variant"soft" | "solid" | "outline" (Svelte)"soft" (Svelte)Svelte · HTML"secondary"Selects the component's visual treatment.
childrenReactNode | Svelte Snippet | child HTML—React · Svelte · HTMLchildren / snippet / child HTMLIdiomatic adapter composition content.