Badge

Compact status/label pill (square, of course).

A small inline label with a semantic `tone` that also colours the leading dot.

Demo

Demo loads from http://localhost:6006. Run pnpm storybook for it to render locally.

svelte

<script>
  import { Badge } from 'dssoca';
</script>

<Badge tone="up">up</Badge>
<Badge tone="down">down</Badge>
<Badge tone="info">to_watch</Badge>

Prop	Type	Default	Description
`tone`	`'up' \| 'deg' \| 'down' \| 'info'`	`'info'`	Semantic tone; sets colour + dot.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.
`children`	`Snippet`	—	Required. Badge content.