Badge

The Badge component shows a small count or a short label next to something else. It suits unread counts, status labels and new item markers.

Example

To use the Badge component in your project, import the required component first. You can create dot-badges just using the Badge component or add text inside the Badge element to create a text badge. Here are some examples:

New
Svelte 
<script>
  import { Badge } from "theui-svelte";
</script>

<Badge ariaTitle="Demo badge" />
<Badge>New</Badge>

Grow Badge

By default, the font size of the Badge component is fixed, 0.8em, making it slightly smaller than regular text. However, you can make the font size inherit from te parent element by adding the grow attribute to the Badge component.

NOT GROWING

GROWING

NOT GROWING New

GROWING New

Svelte 
<!-- Indicator badge -->
<Badge ariaTitle="Demo badge" />
<!-- Text badge -->
<Badge grow>...</Badge>

Fixed Top Badge

You can position badges at fixed locations relative to their parent elements using the fixed attribute.

Notifications

Notifications New

Svelte 
<p class="relative p-2 bg-secondary">
  Notifications <Badge ariaTitle="3 unread" fixed />
</p>
<p class="relative p-2 bg-secondary">
  Notifications <Badge fixed>New</Badge>
</p>

Rounded Corner

The rounded prop in the Badge component controls its border radius. Values: none, sm, md, lg, xl, 2xl, full. Default is full.

New New New New New
Svelte 
<Badge ... rounded="xl">New</Badge>
<Badge ... rounded="lg">New</Badge>
<Badge ... rounded="md">New</Badge>
<Badge ... rounded="sm">New</Badge>
<Badge ... rounded="none">New</Badge>

Customization

To change the background color, add your own classes to the Badge. They are merged with the defaults, so a background class of yours replaces the built in one. Here's an example:

New

Notifications New

Svelte 
<Badge ariaTitle="Demo badge" class="bg-green-500"/>

<Badge class="bg-yellow-400 text-black">New</Badge>

<p class="relative font-semibold text-white p-2 bg-gradient-to-r from-red-400 to-yellow-500">
  Notifications <Badge class="border-white dark:border-black" fixed>New</Badge>
</p>

Anything else you pass reaches the element itself, so an id, a title, a data-* attribute or an event handler all work the way they would on a <span>.

Accessibility

Every badge carries role="status", so a screen reader announces it when it appears or its text changes, which is what a count or a "New" marker is for.

A badge with text is read as that text, so leave ariaTitle off a badge that says something. A label would replace the content, and <Badge>New</Badge> with an ariaTitle is read as the label, never as "New".

A dot badge shows no text, so it has nothing to be read as. Give that one an ariaTitle that says what it stands for, such as ariaTitle="3 unread". The remaining thing to watch is contrast: a custom background needs a text color to match.

Configuration