Badge
A short status label, with a live dot when it changes.
Example
Live New Demo Review Blocked Draft
<script lang="ts">
import { Badge } from '@onlywin/ui-svelte';
</script>
<div class="example-row">
<Badge tone="success" live>Live</Badge>
<Badge tone="brand">New</Badge>
<Badge tone="info">Demo</Badge>
<Badge tone="warning" dot>Review</Badge>
<Badge tone="danger">Blocked</Badge>
<Badge>Draft</Badge>
</div>Usage
Do
- Use it for status: Live, Draft, Certified.
Don’t
- Do not use it as a button.
Accessibility
- Text carries the meaning; tone and the dot only repeat it.
Props
The same props in both frameworks. In React, class is className, events are camelCase (onClick),
content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use,
and elementRef reaches the DOM element.
| Prop | Type | Default | Description |
|---|---|---|---|
children
*required | Snippet | — | |
dot | boolean | false | A square status dot; `live` makes it pulse (stops for reduced motion). |
live | boolean | false |