Badge

Displays a short status label. Use tones to communicate meaning.

Import

import { Badge } from '@aspect/react';

Tones

• Neutral — default, no semantic meaning
• Success — positive outcomes, healthy states
• Warning — needs attention
• Danger — errors, failures, destructive states
• Info — informational, new items

Dot indicator

Add dot to show a small colored circle before the label. Useful for status lists.

<Badge tone="success" dot>Running</Badge>
<Badge tone="danger" dot>Failed</Badge>

Props

| Prop | Type | Default | Description | | ------ | ----------------------------------------------------------- | ----------- | ---------------------------- | | tone | 'neutral' \| 'success' \| 'warning' \| 'danger' \| 'info' | 'neutral' | Color intent | | dot | boolean | false | Shows a dot before the label |

CSS class

<span class="mizu-badge mizu-badge--success">Active</span>

Guidelines

Do:

• Use consistent tones across the app (success = green = positive everywhere)
• Keep labels short — one or two words

Don't:

• Don't use badges for long text or sentences
• Don't mix tone meanings — if success means "active" in one place, don't use it for "new" elsewhere