Primary Secondary Error Success Warning Info Outline Beta

<script lang="ts">
  import { Badge } from "kumo-svelte/components/badge";
</script>

<div class="flex flex-wrap items-center gap-2">
  <Badge variant="primary">Primary</Badge>
  <Badge variant="secondary">Secondary</Badge>
  <Badge variant="error">Error</Badge>
  <Badge variant="success">Success</Badge>
  <Badge variant="warning">Warning</Badge>
  <Badge variant="info">Info</Badge>
  <Badge variant="outline">Outline</Badge>
  <Badge variant="beta">Beta</Badge>
</div>

Import

import { Badge } from "kumo-svelte/components/badge";

Usage

<script lang="ts">
  import { Badge } from "kumo-svelte/components/badge";
</script>

<Badge variant="secondary">New</Badge>

Examples

Primary Badges

Primary Secondary Error Success Warning Info Outline Beta

<script lang="ts">
  import { Badge } from "kumo-svelte/components/badge";
</script>

<div class="flex flex-wrap items-center gap-2">
  <Badge variant="primary">Primary</Badge>
  <Badge variant="secondary">Secondary</Badge>
  <Badge variant="error">Error</Badge>
  <Badge variant="success">Success</Badge>
  <Badge variant="warning">Warning</Badge>
  <Badge variant="info">Info</Badge>
  <Badge variant="outline">Outline</Badge>
  <Badge variant="beta">Beta</Badge>
</div>

Other color variants

Other color variants are available for specific products and use cases where the semantic badges are not enough to convey the intended meaning or status.

Neutral Red Orange Green Teal Blue Purple

<script lang="ts">
  import { Badge } from "kumo-svelte/components/badge";
</script>

<div class="flex flex-wrap items-center gap-2">
  <Badge variant="neutral">Neutral</Badge>
  <Badge variant="red">Red</Badge>
  <Badge variant="orange">Orange</Badge>
  <Badge variant="green">Green</Badge>
  <Badge variant="teal">Teal</Badge>
  <Badge variant="blue">Blue</Badge>
  <Badge variant="purple">Purple</Badge>
</div>

Dot badges

Use appearance="dot" for a subtle status indicator with a colored dot. Supported with success, warning, error, and neutral variants.

Healthy Warning Error Neutral

<script lang="ts">
  import { Badge } from "kumo-svelte/components/badge";
</script>

<div class="flex flex-wrap items-center gap-2">
  <Badge variant="success" appearance="dot">Healthy</Badge>
  <Badge variant="warning" appearance="dot">Warning</Badge>
  <Badge variant="error" appearance="dot">Error</Badge>
  <Badge variant="neutral" appearance="dot">Neutral</Badge>
</div>

In a sentence

Workers New

<script lang="ts">
  import { Badge } from "kumo-svelte/components/badge";
</script>

<p class="flex items-center gap-2">
  Workers
  <Badge variant="secondary">New</Badge>
</p>

API Reference

Badge

Prop	Type	Default
appearance	`KumoBadgeAppearance`	`KUMO_BADGE_DEFAULT_VARIANTS.appearance`
variant	`KumoBadgeVariant`	`KUMO_BADGE_DEFAULT_VARIANTS.variant`
class	`string`	—
children*	`Snippet`	—