Badge
Badge description.
With UnoCSS
Usage
Basic
html
<div badge-default>Badge</div>
<div badge>Badge</div>Badge
Badge
Sizes
html
<div badge badge-xs>Badge</div>
<div badge badge-sm>Badge</div>
<div badge="~ md">Badge</div>
<div badge="~ lg">Badge</div>xs small
small
default
large
Rounded
When the content is empty, the badge will be rounded.
html
<div badge badge-xs></div>
<div badge badge-sm></div>
<div badge="~ md"></div>
<div badge="~ lg"></div>Colors
When the content is empty, the badge will be rounded.
html
<div badge badge-red>+99</div>
<div badge="~ yellow">+99</div>
<div badge badge-red></div>
<div badge="~ yellow"></div>+99
+99
Compose
For more complex badges, you can compose them with other components.
html
<button btn>
Inbox
<div badge="~ theme-200 sm">
+99
</div>
</button>With Vue
TODO