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. Using the text props will 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>

Customization

The Badge component allows you to customize its colors to match your application's theme or convey specific meanings. By default, it uses standard styles, but you can easily override them with custom CSS classes.

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 Badge 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