Home
Badge
The badge component is used to display a small amount of information to the user.
Usage
<div class="badge-wrapper">
<wc-icon name="notifications"></wc-icon>
<wc-badge class="badge-anchor-simple"></wc-badge>
</div>
<div class="badge-wrapper">
<wc-icon name="notifications"></wc-icon>
<wc-badge class="badge-anchor" value="1"></wc-badge>
</div>
<div class="badge-wrapper">
<wc-icon name="notifications"></wc-icon>
<wc-badge class="badge-anchor" value="999+"></wc-badge>
</div>
<style>
.badge-wrapper {
position: relative;
display: inline-flex;
width: 1.5rem;
height: 1.5rem;
align-items: center;
justify-content: center;
}
.badge-anchor-simple {
position: absolute;
top: 0;
right: 0;
}
.badge-anchor {
position: absolute;
top: -2px;
left: calc(100% - 12px);
}
</style>