Badge
<quiet-badge>
Badges display useful information or notifications such as a new feature or an unread message count.
<quiet-badge>12 items</quiet-badge>
Examples Jump to heading
Variants Jump to heading
Badges have four variants. Default badges are useful when you want to tag something with less importance. Primary badges are intended to be more obvious. Constructive badges are indicative of success, whereas destructive badges are indicative of danger.
<quiet-badge variant="default">Default</quiet-badge> <quiet-badge variant="primary">Primary</quiet-badge> <quiet-badge variant="constructive">Constructive</quiet-badge> <quiet-badge variant="destructive">Destructive</quiet-badge>
Changing the size Jump to heading
Badges are sized relative to the current font size. This allows you to place them into many contexts without
having to explicitly size them. To change the size, set the font-size property on the badge or
an ancestor element.
<quiet-badge>Normal</quiet-badge> <quiet-badge style="font-size: 1rem;">Big</quiet-badge> <quiet-badge style="font-size: 1.25rem;">Bigger</quiet-badge>
Changing the color Jump to heading
Use the color and background-color properties to change badge colors. You can also
apply borders with border and gradients with the background-image property.
<quiet-badge style="background-color: royalblue; color: white; border: none;">Royal Blue</quiet-badge> <quiet-badge style="background-color: deeppink; color: white; border: none;">Deep Pink</quiet-badge> <quiet-badge style="background-color: forestgreen; color: white; border: none;">Forest Green</quiet-badge>
Using icons Jump to heading
Icons can be added before or after the badge's text.
<quiet-badge style="background-color: firebrick; color: white;"><quiet-icon name="bug"></quiet-icon> Bug</quiet-badge> <quiet-badge style="background-color: #2563eb; color: white;"><quiet-icon name="book-2"></quiet-icon> Documentation</quiet-badge> <quiet-badge style="background-color: #d97706; color: white;"><quiet-icon name="copy"></quiet-icon> Duplicate</quiet-badge>
Badges can also be icon-only.
<quiet-badge style="background-color: #ea580c; color: white;"><quiet-icon label="Cat" name="cat"></quiet-icon></quiet-badge> <quiet-badge style="background-color: #059669; color: white;"><quiet-icon label="Dog" name="dog"></quiet-icon></quiet-badge> <quiet-badge style="background-color: #4f46e5; color: white;"><quiet-icon label="Mouse" name="mouse"></quiet-icon></quiet-badge>
Drawing attention Jump to heading
Use the attention attribute to draw attention to a badge with an animation. Remove the
attribute to stop the animation. Users with a preference for reduced motion will see a more subtle pulse
instead of the default bounce.
<quiet-badge attention style="background-color: #2563eb; color: white;">4 new messages</quiet-badge>
You can customize the speed and easing of attention animations using the
--attention-duration and --attention-easing custom properties.
API Jump to heading
Importing Jump to heading
The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.
To manually import <quiet-badge> from the CDN, use the following code.
import 'https://cdn.jsdelivr.net/npm/@quietui/quiet@1.0.0/dist/components/badge/badge.js';
To manually import <quiet-badge> from npm, use the following code.
import '@quietui/quiet/dist/components/badge/badge.js';
Slots Jump to heading
Badge supports the following slots. Learn more about using slots
| Name | Description |
|---|---|
| (default) | The badge's content. |
Properties Jump to heading
Badge has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties
| Property / Attribute | Description | Reflects | Type | Default |
|---|---|---|---|---|
variant
|
The type of badge to draw. |
|
'default'
|
'default'
|
attention
|
Draws attention to the badge using an animation. |
|
boolean
|
false
|
CSS custom properties Jump to heading
Badge supports the following CSS custom properties. You can style them like any other CSS property. Learn more about CSS custom properties
| Name | Description | Default |
|---|---|---|
--attention-duration |
The speed at which the attention animation will run. |
1.5s
|
--attention-easing |
The easing to use for the attention animation. |
ease
|