Badge
kumo-svelte

Badge

Displays a small label for status, categorization, or metadata.

Primary Secondary Error Success Warning Info Outline Beta
<script lang="ts">
  import { Badge } from 'kumo-svelte';
</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>

Installation

Barrel

import { Badge } from 'kumo-svelte';

Granular

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

Usage

<script lang="ts">  import { Badge } from 'kumo-svelte';</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';
</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 variants

Other variants for specific products/use cases where the semantic badges aren't enough to convey intended meaning or status.

Neutral Red Green Orange Teal Blue Purple
<script lang="ts">
  import { Badge } from 'kumo-svelte';
</script>

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

Dot appearance

Use appearance="dot" with success, warning, error, or neutral variants to show a compact status indicator.

Healthy Degraded Down Unknown
<script lang="ts">
  import { Badge } from 'kumo-svelte';
</script>

<div class="flex flex-wrap items-center gap-2">
  <Badge variant="success" appearance="dot">Healthy</Badge>
  <Badge variant="warning" appearance="dot">Degraded</Badge>
  <Badge variant="error" appearance="dot">Down</Badge>
  <Badge variant="neutral" appearance="dot">Unknown</Badge>
</div>

In a sentence

Workers New

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

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

API Reference

PropTypeDefaultDescription
variant 'primary' | 'secondary' | 'error' | 'warning' | 'success' | 'destructive' | 'info' | 'beta' | 'outline' | 'red' | 'green' | 'neutral' | 'orange' | 'purple' | 'teal' | 'teal-subtle' | 'blue'"primary"Visual variant.
appearance 'filled' | 'dot'"filled"Visual appearance. Dot renders an outlined badge with a small status indicator for success, warning, error, or neutral variants.
class string-Additional classes merged onto the root element.
children *Snippet-Content rendered inside the badge.