Badge

The Badge highlights an item’s status for quick recognition.

Badge

// apps/docs/src/components/examples/badge/default/react.tsx
import { Badge } from '@cloudvoyant/helical-react';

export default function ReactBadgeDefault() {
  return <Badge>Badge</Badge>;
}

<!-- apps/docs/src/components/examples/badge/default/svelte.svelte -->
<script lang="ts">
  import { Badge } from '@cloudvoyant/helical-svelte';
</script>

<Badge>Badge</Badge>

Examples

Colors

PrimarySecondarySuccessDangerWarnInfo

Primary Secondary Success Danger Warn Info

// apps/docs/src/components/examples/badge/colors/react.tsx
import { Badge } from '@cloudvoyant/helical-react';

export default function ReactBadgeColors() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Badge color="primary">Primary</Badge>
      <Badge color="secondary">Secondary</Badge>
      <Badge color="success">Success</Badge>
      <Badge color="danger">Danger</Badge>
      <Badge color="warn">Warn</Badge>
      <Badge color="info">Info</Badge>
    </div>
  );
}

<!-- apps/docs/src/components/examples/badge/colors/svelte.svelte -->
<script lang="ts">
  import { Badge } from '@cloudvoyant/helical-svelte';
</script>

<div class="flex flex-wrap items-center gap-3">
  <Badge color="primary">Primary</Badge>
  <Badge color="secondary">Secondary</Badge>
  <Badge color="success">Success</Badge>
  <Badge color="danger">Danger</Badge>
  <Badge color="warn">Warn</Badge>
  <Badge color="info">Info</Badge>
</div>

Sizes

Extra smallSmallMediumLarge

Extra small Small Medium Large

// apps/docs/src/components/examples/badge/sizes/react.tsx
import { Badge } from '@cloudvoyant/helical-react';

export default function ReactBadgeSizes() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Badge size="xs">Extra small</Badge>
      <Badge size="sm">Small</Badge>
      <Badge size="md">Medium</Badge>
      <Badge size="lg">Large</Badge>
    </div>
  );
}

<!-- apps/docs/src/components/examples/badge/sizes/svelte.svelte -->
<script lang="ts">
  import { Badge } from '@cloudvoyant/helical-svelte';
</script>

<div class="flex flex-wrap items-center gap-3">
  <Badge size="xs">Extra small</Badge>
  <Badge size="sm">Small</Badge>
  <Badge size="md">Medium</Badge>
  <Badge size="lg">Large</Badge>
</div>

Variants

SolidSubtleOutlineSurfacePlain

Solid Subtle Outline Surface Plain

// apps/docs/src/components/examples/badge/variants/react.tsx
import { Badge } from '@cloudvoyant/helical-react';

export default function ReactBadgeVariants() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Badge variant="solid">Solid</Badge>
      <Badge variant="subtle">Subtle</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="surface">Surface</Badge>
      <Badge variant="plain">Plain</Badge>
    </div>
  );
}

<!-- apps/docs/src/components/examples/badge/variants/svelte.svelte -->
<script lang="ts">
  import { Badge } from '@cloudvoyant/helical-svelte';
</script>

<div class="flex flex-wrap items-center gap-3">
  <Badge variant="solid">Solid</Badge>
  <Badge variant="subtle">Subtle</Badge>
  <Badge variant="outline">Outline</Badge>
  <Badge variant="surface">Surface</Badge>
  <Badge variant="plain">Plain</Badge>
</div>

API Reference

The React and Svelte components accept the same variant, color, and size props as the Button, plus standard span attributes. The API follows Chakra UI’s Badge, with the color palette matching the Button component.

Badge

Props

Prop	Type	Default	Description
`variant`	`'solid' \| 'subtle' \| 'outline' \| 'surface' \| 'plain'`	`'subtle'`	Visual style.
`color`	`'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warn' \| 'info'`	`'primary'`	Color palette, matching the Button component.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'sm'`	Size of the badge.
`className` / `class`	`string`	—	Merged via `cn` with the variant classes. Pass any Tailwind class here to fully customize, e.g. a custom background color.

Accessibility

As a non-interactive <span>, the Badge needs no roles or keyboard handling. If the badge conveys meaning by color alone (e.g. status), pair it with text or a visually-hidden label so screen reader users get the same information.