Badge

CSS tools such as tailwindcss and unocss are recommended. They make UI customization easier and help build smaller CSS files on demand.

CSS badge classes in the default stylesheet.

CSS

Basic DOM

HTML
<span class="j-badge">1</span>

Badge Variants

Set the is-{variant} class to create different badge variants.

1 9 99 99 99 99 99 999 999 999

HTML
<span class="j-badge is-default">1</span><span class="j-badge is-reverse">9</span><span class="j-badge is-solid">99</span><span class="j-badge is-soft">99</span><span class="j-badge is-wash">99</span><span class="j-badge is-primary">99</span><span class="j-badge is-success">99</span><span class="j-badge is-warning">999</span><span class="j-badge is-danger">999</span><span class="j-badge is-error">999</span>

Badge Sizes

Set the is-{size} class to create badges in different sizes.

sm md v1.0.0 v1.0.0

HTML
<span class="j-badge is-sm">sm</span> <span class="j-badge is-md">md</span>