Badge

Small pill-style labels for status, counts, or categories. Variants: default, success, warning, and error. Complete Initialization first, then use the CLI or copy the source below.

Preview

Live

DefaultSuccessWarningError

Add via CLI

npm exec -- my-ui add badge

Component source

<span class="ui-badge ui-badge--default">Default</span>
<span class="ui-badge ui-badge--success">Success</span>
<span class="ui-badge ui-badge--warning">Warning</span>
<span class="ui-badge ui-badge--error">Error</span>