Badge

The Badge component is a versatile UI element used for displaying small counts, labeling, or providing important indications to users. Badges are commonly used to highlight new content, show notifications, or denote status updates.

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 ariaTitle="Demo 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 />
<!-- 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 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, full. Default is md.

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

Tailor every Badge to your needs with flexible color options that support both branding and semantic meaning. Built-in styles get you started, while custom CSS classes let you take full control. To change the background color, simply add your own CSS classes to the Badge component. Here’s an example:

New

Notifications

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

<Badge ariaTitle="New 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" text="New" fixed />
</p>

Accessibility

The component is designed with accessibility in mind, automatically handling ARIA attributes like aria-label through a visually hidden <span> element. This ensures assistive technologies can describe the badge's purpose. You only need to focus on providing meaningful text and maintaining proper color contrast for readability.

Configuration