Components

Badge

Pins a count or a dot to the corner of a button, an avatar or an icon, or labels a line of text.

Usage

A Badge centres its count on the top end corner of what it wraps, in either writing direction. Counts above max show as 99+, and a count of 0 hides the badge. Without anything to wrap, it stands in the line.

Savings New · Disputes 2 open

Inbox.svelte

<script>
  import { Badge, Button, Icon } from 'sveltier';
</script>

<!-- The button is described by the badge's text, so the count is heard on focus. -->
<Badge id="inbox" content={3} label="unread messages">
  <Button icon aria-label="Messages" aria-describedby="inbox-label">
    <Icon path={mdiEmail} />
  </Button>
</Badge>

<!-- Alone in a line. -->
Savings <Badge content="New" />

Accessibility

The badge's own text is hidden from screen readers, which hear the real count and its label instead: "120 alerts", not "99+". A dot says only its label, so give it one when it means something.

Text next to a button is not read when the button is focused. Give the Badge an id, and its text gets the id {id}-label: point the button's aria-describedby at it, and the count is read with the button.

API

Name	Type	Default	Description
`color`	`Color`	`'primary'`	The badge's fill.
`max`	`number`	`99`	Counts above it show as `max+`.
`content`	`number \| string`	`–`	What the badge says: usually a count.
`dot`	`boolean`	`false`	A dot instead of the content.
`label`	`string`	`–`	What the content counts, read after it by screen readers: `unread messages` reads "3 unread messages". With `dot`, the whole announcement. With an `id`, this text has the id `{id}-label`, for the `aria-describedby` of a button the badge is pinned to.
`children`	`Snippet`	`–`	The content the badge is pinned to.
`class`	`ClassValue \| null`	`–`	Classes added after the component's own: a string, an array or an object.
`ref`	`HTMLSpanElement \| null`	`–`	The root element, bindable with `bind:ref`.