# 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:
```html
New
```
## 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.
```html
...
```
## Fixed Top Badge
You can position badges at fixed locations relative to their parent elements using the `fixed` attribute.
```html
Notifications
Notifications New
```
## Rounded Corner
The `rounded` prop in the `Badge` component controls its border radius. Values: `none`, `sm`, `md`, `lg`, `xl`, `2xl`, `full`. Default is `full`.
```html
New
New
New
New
New
```
## 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:
```html
New
Notifications New
```
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 ``.
## 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 `New` 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
### Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `ariaTitle` | string \| undefined | `undefined` | Names a badge that shows no text, such as a dot badge. Leave it off a badge with text: the label would replace that text for a screen reader. |
| `rounded` | [ROUNDED](https://www.theui.dev/docs/types#rounded-type) | `full` | Defines the border radius of the component. |
### Dynamic props
| Name | Description |
| --- | --- |
| `grow` | Determines if the component should grow to match the parent element's font size. |
| `fixed` | Fixes the component to the top of its container. |
| `class` | Classes for the badge element, merged with the default classes. |
---
Category: Components
Keywords: badge, notification, status-label, component, svelte, svelte-5, theui-svelte, component-library, ui, tailwindcss
Full documentation set: https://www.theui.dev/llms-full.txt