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
Set the variant attribute to default, primary,
constructive, or destructive to change the badges's variant.
<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>
Outline badges Jump to heading
Set the appearance attribute to outline to draw outlined badges.
<quiet-badge appearance="outline" variant="default">Default</quiet-badge> <quiet-badge appearance="outline" variant="primary">Primary</quiet-badge> <quiet-badge appearance="outline" variant="constructive">Constructive</quiet-badge> <quiet-badge appearance="outline" 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>
Drawing attention Jump to heading
Set the attention attribute to tap, shake, or sparkle 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 animation.
<quiet-badge attention="tap" variant="primary">Primary</quiet-badge> <quiet-badge attention="shake" variant="primary">Shake</quiet-badge> <quiet-badge attention="sparkle" variant="primary">Sparkle</quiet-badge>
You can customize the speed and easing of attention animations using the
--attention-duration and --attention-easing custom properties.
Styling badges Jump to heading
Use the color, background-color, and border-color properties to
change badge colors. You can also apply 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>
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-browser@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'
|
appearance
|
Determines the badges's appearance. |
|
'normal'
|
'normal'
|
attention
|
Draws attention to the badge using an animation. |
|
'tap'
|
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
|