Display

Badge

Small count and status indicators anchored to icons, avatars and buttons.

<script>
  import { Badge } from "@codeatlasdev/ui";
</script>

<Badge count={3}><IconButton aria-label="Messages">…</IconButton></Badge>

Badge wraps its child and positions the indicator on the corner. Pass count for a number (hidden at 0, capped at 99+) or dot for a plain status dot. Add an accessible label to the wrapped control, since the indicator itself is visual.

Dot and counts

`dot` shows a plain indicator, `count` shows a number capped at `99+`.

3 99 99+

Code

<script lang="ts">
  import { Badge, IconButton, Row } from '@codeatlasdev/ui';
  import { Bell, Mail, ShoppingCart } from '@lucide/svelte';
</script>

<Row gap={16} align="center" wrap>
  <Badge dot><IconButton aria-label="Notifications"><Bell size={20} /></IconButton></Badge>
  <Badge count={3}><IconButton aria-label="Messages"><Mail size={20} /></IconButton></Badge>
  <Badge count={99}><IconButton aria-label="Cart"><ShoppingCart size={20} /></IconButton></Badge>
  <Badge count={100}><IconButton aria-label="Notifications"><Bell size={20} /></IconButton></Badge>
</Row>

On avatars

Status dots on avatars.

Code

<script lang="ts">
  import { Badge, Avatar, Row } from '@codeatlasdev/ui';
</script>

<Row gap={16} align="center" wrap>
  <Badge dot color="success"><Avatar alt="Ana Lima" size="md" /></Badge>
  <Badge dot color="warning"><Avatar alt="Carlos M" size="md" /></Badge>
  <Badge dot color="error"><Avatar alt="Diana K" size="md" /></Badge>
</Row>

Colors

brand, success, warning and error.

5 5 5 5

Code

<script lang="ts">
  import { Badge, IconButton, Row } from '@codeatlasdev/ui';
  import { Bell } from '@lucide/svelte';
</script>

<Row gap={16} align="center" wrap>
  <Badge count={5} color="brand"><IconButton aria-label="Notifications"><Bell size={20} /></IconButton></Badge>
  <Badge count={5} color="success"><IconButton aria-label="Notifications"><Bell size={20} /></IconButton></Badge>
  <Badge count={5} color="warning"><IconButton aria-label="Notifications"><Bell size={20} /></IconButton></Badge>
  <Badge count={5} color="error"><IconButton aria-label="Notifications"><Bell size={20} /></IconButton></Badge>
</Row>

Props

Prop	Type	Default	Description
`count`	`number`	`undefined`	Number to display. Hidden when 0 or undefined unless `dot` is set. Values above 99 render as `99+`.
`dot`	`boolean`	`false`	Shows a dot instead of a number.
`color`	`'brand' \| 'success' \| 'error' \| 'warning'`	`'brand'`	Indicator color.
`class`	`string`	`''`	Extra class names.
`children`	`Snippet`	`undefined`	The element the badge is anchored to.