Count badge with cap
Good for notifications, queue depth, or unread counts.
<CwBadge value={147} max={99} tone="danger" position="top_right">
<button type="button">Alerts</button>
</CwBadge>CwBadge
Wrap any content and anchor a badge at top-left, top-right, bottom-left, or bottom-right.
Top right 7
Top left 12
Bottom right 3
Bottom left (dot)
<CwBadge value={7} position="top_right">
<button type="button" class="demo-target">Refresh</button>
</CwBadge>
<CwBadge dot tone="success" position="bottom_left">
<button type="button" class="demo-target">Live</button>
</CwBadge>Documentation Upgrade
Start here
CwBadge decorates existing content. The wrapped content is still the thing users interact with; the badge only adds count, dot, or custom status UI around it.
How to think about it
- Wrap the real target Place the button, icon, or avatar you already have inside `CwBadge` so the badge stays anchored to it.
- Pick one display mode Use `value` for counts, `dot` for a simple indicator, or the `badge` snippet when you need custom markup.
- Clamp noisy counts Set `max` so large numbers stay compact, for example showing `99+` instead of overflowing.
Props and callbacks
| API | Type | Details |
|---|---|---|
position Default: | 'top_left' | 'top_right' | 'bottom_left' | 'bottom_right' | Corner where the badge is anchored. |
tone Default: | CwTone | Color theme applied to the badge. |
size Default: | 'sm' | 'md' | 'lg' | Badge size preset. |
value | string | number | Text or numeric count displayed inside the badge. |
max Default: | number | Upper cap before a numeric value is rendered as `max+`. |
dot Default: | boolean | Renders a dot-only badge with no text. |
hidden Default: | boolean | Keeps the wrapped content visible while hiding the badge. |
children Required | Snippet | The wrapped content the badge is attached to. |
badge | Snippet | Optional custom badge content. Overrides normal text rendering. |
Copy-paste examples
These snippets intentionally show the full public API surface the live demo relies on.
Dot and custom badge content
Use the `badge` snippet when you need something richer than a number.
<script lang="ts">
let online = $state(true);
</script>
<CwBadge dot tone="success" hidden={!online}>
<button type="button">Gateway</button>
</CwBadge>
<CwBadge position="bottom_left" tone="info">
{#snippet badge()}
<span style="padding-inline:0.25rem">NEW</span>
{/snippet}
<button type="button">Firmware</button>
</CwBadge>