Component primitive

Brand Tag

<brand-tag> wraps Web Awesome's <wa-tag>. Tags are pale tinted by default, use <brand-badge> for a solid label.

<brand-tag>Framework-agnostic custom element

Light themeSemantic surface

Dark themeSame component API

Element: <brand-tag>
Library: Brand
Runtime: Web Component
Theming: Semantic tokens

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('wa-remove', (event) => {
  event.target.remove();
});