Brand
Changelog v1.4

Brand Tag

<brand-tag> wraps Shoelace's <sl-tag>. Tags are pale tinted by default — use <brand-badge> for a solid label.

Variants

Neutral Primary Success Warning Error

Sizes

Small Medium Large

Pill

Design Live Beta Deprecated

Removable (filter chips)

Brand: Snyder Status: Active Role: Admin

Usage

import { BrandTag } from '@brandos/ui';

<brand-tag>Label</brand-tag>
<brand-tag variant="success" pill>Live</brand-tag>
<brand-tag variant="primary" removable>Filter: Snyder</brand-tag>

// JS
document.querySelector('brand-tag').addEventListener('sl-remove', (event) => {
  event.target.remove();
});