Badge

Badges are often used as unread number indicators.

Badged elements

Add the badge class to non self closing elements. And add the data-badge attribute to define the content of a badge. The badge will appear in the top-right direction of the element.

If there is no data-badge or the attribute is not specified, the badge will appear as a dot.

<script>
    import { badge } from 'svelte-spectre'
</script>

<span use:badge={'8'}>Notifications</span>

Avatar & Button

Badges support Button and Avatars components as well.

Button Button

Button Button

<script>
    import { Avatar, Button } from 'svelte-spectre'
</script>

<Avatar badge="8">
    <img src="/img/avatar-1.png" alt="YZ">
</Avatar>

<Button badge="8">Button</Button>

Component

default Badge   primary rounded   secondary Badge   success rounded   warning Badge   error rounded

<script>
    import { Badge } from 'svelte-spectre'
</script>

<Badge>default Badge</Badge>
<Badge color="primary" rounded>primary rounded</Badge>
<Badge color="secondary">secondary Badge</Badge>
<Badge color="success" rounded>success rounded</Badge>
<Badge color="warning">warning Badge</Badge>
<Badge color="error" rounded>error rounded</Badge>