# Tags & Badges

> Etiquetas para categorizar contenido, estados y filtros: sólidas, suaves, con contorno, punteadas, con ícono, vacías y dentro de textos y botones.

Categoría: Acción · Solar v0.8.0

Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html).

## Básico

```html
<div class="flex flex-col gap-4">
  <div class="flex flex-wrap items-center gap-3">
    <span class="inline-flex items-center gap-1 h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-blue/10 text-ccs-blue dark:text-ccs-dark-accent dark:bg-ccs-dark-accent/10">Comités</span>
  </div>
</div>
```

## Tamaños

```html
<div class="flex flex-col gap-4">
  <div class="flex flex-wrap items-center gap-3">
    <div class="w-36 shrink-0 text-xs text-ccs-slate dark:text-ccs-dark-text-2">Pequeño · 20 px</div>
    <span class="inline-flex items-center gap-1 h-5 px-2 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-blue/10 text-ccs-blue dark:text-ccs-dark-accent dark:bg-ccs-dark-accent/10">Comités</span>
    <span class="inline-flex items-center gap-1 h-5 pl-1.5 pr-2 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-success-soft text-ccs-success dark:bg-ccs-dark-success-fill/10 dark:text-ccs-dark-success"><iconify-icon icon="solar:check-circle-bold" class="shrink-0 text-[12px]" aria-hidden="true"></iconify-icon>Aprobado</span>
    <span class="inline-flex items-center gap-1 h-5 px-2 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-blue text-white dark:bg-ccs-blue-mid">Premium</span>
    <span role="img" aria-label="Información" class="inline-flex items-center justify-center h-5 w-5 rounded-full bg-ccs-blue/10 text-ccs-blue dark:text-ccs-dark-accent dark:bg-ccs-dark-accent/10"><iconify-icon icon="solar:info-circle-bold" class="shrink-0 text-[12px]" aria-hidden="true"></iconify-icon></span>
  </div>
  <div class="flex flex-wrap items-center gap-3">
    <div class="w-36 shrink-0 text-xs text-ccs-slate dark:text-ccs-dark-text-2">Mediano · 24 px</div>
    <span class="inline-flex items-center gap-1 h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-blue/10 text-ccs-blue dark:text-ccs-dark-accent dark:bg-ccs-dark-accent/10">Comités</span>
    <span class="inline-flex items-center gap-1 h-6 pl-2 pr-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-success-soft text-ccs-success dark:bg-ccs-dark-success-fill/10 dark:text-ccs-dark-success"><iconify-icon icon="solar:check-circle-bold" class="shrink-0 text-[14px]" aria-hidden="true"></iconify-icon>Aprobado</span>
    <span class="inline-flex items-center gap-1 h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-blue text-white dark:bg-ccs-blue-mid">Premium</span>
    <span role="img" aria-label="Información" class="inline-flex items-center justify-center h-6 w-6 rounded-full bg-ccs-blue/10 text-ccs-blue dark:text-ccs-dark-accent dark:bg-ccs-dark-accent/10"><iconify-icon icon="solar:info-circle-bold" class="shrink-0 text-[14px]" aria-hidden="true"></iconify-icon></span>
  </div>
  <div class="flex flex-wrap items-center gap-3">
    <div class="w-36 shrink-0 text-xs text-ccs-slate dark:text-ccs-dark-text-2">Grande · 28 px</div>
    <span class="inline-flex items-center gap-1.5 h-7 px-3 rounded-full text-sm font-medium whitespace-nowrap bg-ccs-blue/10 text-ccs-blue dark:text-ccs-dark-accent dark:bg-ccs-dark-accent/10">Comités</span>
    <span class="inline-flex items-center gap-1.5 h-7 pl-2.5 pr-3 rounded-full text-sm font-medium whitespace-nowrap bg-ccs-success-soft text-ccs-success dark:bg-ccs-dark-success-fill/10 dark:text-ccs-dark-success"><iconify-icon icon="solar:check-circle-bold" class="shrink-0 text-[16px]" aria-hidden="true"></iconify-icon>Aprobado</span>
    <span class="inline-flex items-center gap-1.5 h-7 px-3 rounded-full text-sm font-medium whitespace-nowrap bg-ccs-blue text-white dark:bg-ccs-blue-mid">Premium</span>
    <span role="img" aria-label="Información" class="inline-flex items-center justify-center h-7 w-7 rounded-full bg-ccs-blue/10 text-ccs-blue dark:text-ccs-dark-accent dark:bg-ccs-dark-accent/10"><iconify-icon icon="solar:info-circle-bold" class="shrink-0 text-[16px]" aria-hidden="true"></iconify-icon></span>
  </div>
</div>
```

## Colores

```html
<div class="flex flex-col gap-4">
  <div class="flex flex-wrap items-center gap-3">
    <span class="inline-flex items-center gap-1 h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-blue text-white dark:bg-ccs-blue-mid">Azul</span>
    <span class="inline-flex items-center gap-1 h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-success text-white dark:bg-ccs-dark-success-fill">Verde</span>
    <span class="inline-flex items-center gap-1 h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-warning text-white dark:bg-ccs-dark-warning-fill">Ámbar</span>
    <span class="inline-flex items-center gap-1 h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-error text-white dark:bg-ccs-dark-error-fill">Rojo</span>
    <span class="inline-flex items-center gap-1 h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-ink text-white dark:bg-ccs-dark-text dark:text-ccs-dark-bg">Neutro</span>
  </div>
</div>
```

## Estilo suave

```html
<div class="flex flex-col gap-4">
  <div class="flex flex-wrap items-center gap-3">
    <span class="inline-flex items-center gap-1 h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-blue/10 text-ccs-blue dark:text-ccs-dark-accent dark:bg-ccs-dark-accent/10">Azul</span>
    <span class="inline-flex items-center gap-1 h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-success-soft text-ccs-success dark:bg-ccs-dark-success-fill/10 dark:text-ccs-dark-success">Verde</span>
    <span class="inline-flex items-center gap-1 h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-warning-soft text-ccs-warning dark:bg-ccs-dark-warning-fill/10 dark:text-ccs-dark-warning">Ámbar</span>
    <span class="inline-flex items-center gap-1 h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-error-soft text-ccs-error dark:bg-ccs-dark-error-fill/10 dark:text-ccs-dark-error">Rojo</span>
    <span class="inline-flex items-center gap-1 h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-bg text-ccs-slate border border-ccs-line dark:text-ccs-dark-text-2 dark:border-ccs-dark-line dark:bg-ccs-dark-overlay">Neutro</span>
  </div>
</div>
```

## Estilo contorno

```html
<div class="flex flex-col gap-4">
  <div class="flex flex-wrap items-center gap-3">
    <span class="inline-flex items-center gap-1 h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap border border-current bg-transparent text-ccs-blue dark:text-ccs-dark-accent">Azul</span>
    <span class="inline-flex items-center gap-1 h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap border border-current bg-transparent text-ccs-success dark:text-ccs-dark-success">Verde</span>
    <span class="inline-flex items-center gap-1 h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap border border-current bg-transparent text-ccs-warning dark:text-ccs-dark-warning">Ámbar</span>
    <span class="inline-flex items-center gap-1 h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap border border-current bg-transparent text-ccs-error dark:text-ccs-dark-error">Rojo</span>
  </div>
</div>
```

## Estilo punteado

```html
<div class="flex flex-col gap-4">
  <div class="flex flex-wrap items-center gap-3">
    <span class="inline-flex items-center gap-1 h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap border border-dashed border-current bg-transparent text-ccs-blue dark:text-ccs-dark-accent">Azul</span>
    <span class="inline-flex items-center gap-1 h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap border border-dashed border-current bg-transparent text-ccs-success dark:text-ccs-dark-success">Verde</span>
    <span class="inline-flex items-center gap-1 h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap border border-dashed border-current bg-transparent text-ccs-warning dark:text-ccs-dark-warning">Ámbar</span>
    <span class="inline-flex items-center gap-1 h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap border border-dashed border-current bg-transparent text-ccs-error dark:text-ccs-dark-error">Rojo</span>
  </div>
</div>
```

## Neutro con contorno o punteado

```html
<div class="flex flex-col gap-4">
  <div class="flex flex-wrap items-center gap-3">
    <span class="inline-flex items-center gap-1 h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap border border-current bg-transparent text-ccs-slate dark:text-ccs-dark-text-2">Borrador</span>
    <span class="inline-flex items-center gap-1 h-6 pl-2 pr-2.5 rounded-full text-xs font-medium whitespace-nowrap border border-current bg-transparent text-ccs-slate dark:text-ccs-dark-text-2"><iconify-icon icon="solar:lock-bold" class="shrink-0 text-[14px]" aria-hidden="true"></iconify-icon>Exclusivo socios</span>
  </div>
  <div class="flex flex-wrap items-center gap-3">
    <span class="inline-flex items-center gap-1 h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap border border-dashed border-current bg-transparent text-ccs-slate dark:text-ccs-dark-text-2">Borrador</span>
    <span class="inline-flex items-center gap-1 h-6 pl-2 pr-2.5 rounded-full text-xs font-medium whitespace-nowrap border border-dashed border-current bg-transparent text-ccs-slate dark:text-ccs-dark-text-2"><iconify-icon icon="solar:clock-circle-bold" class="shrink-0 text-[14px]" aria-hidden="true"></iconify-icon>Por confirmar</span>
  </div>
</div>
```

## Fantasma

```html
<div class="flex flex-col gap-4">
  <div class="flex flex-wrap items-center gap-3">
    <span class="inline-flex items-center gap-1 h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-bg text-ccs-slate dark:bg-ccs-dark-overlay dark:text-ccs-dark-text-2">Sin asignar</span>
    <span class="inline-flex items-center gap-1 h-6 pl-2 pr-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-bg text-ccs-slate dark:bg-ccs-dark-overlay dark:text-ccs-dark-text-2"><iconify-icon icon="solar:folder-bold" class="shrink-0 text-[14px]" aria-hidden="true"></iconify-icon>Archivado</span>
    <span class="inline-flex items-center gap-1 h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-bg text-ccs-slate dark:bg-ccs-dark-overlay dark:text-ccs-dark-text-2">12 vistas</span>
  </div>
</div>
```

## Vacío

```html
<div class="flex flex-col gap-4">
  <div class="flex flex-wrap items-center gap-3">
    <div class="w-36 shrink-0 text-xs text-ccs-slate dark:text-ccs-dark-text-2">Pequeño</div>
    <span class="inline-block w-2 h-2 rounded-full bg-ccs-blue dark:bg-ccs-dark-accent" aria-hidden="true"></span>
    <span class="inline-block w-2 h-2 rounded-full bg-ccs-success-fill dark:bg-ccs-dark-success-fill" aria-hidden="true"></span>
    <span class="inline-block w-2 h-2 rounded-full bg-ccs-warning-fill dark:bg-ccs-dark-warning-fill" aria-hidden="true"></span>
    <span class="inline-block w-2 h-2 rounded-full bg-ccs-error-fill dark:bg-ccs-dark-error-fill" aria-hidden="true"></span>
    <span class="inline-block w-2 h-2 rounded-full bg-ccs-slate dark:bg-ccs-dark-text-2" aria-hidden="true"></span>
  </div>
  <div class="flex flex-wrap items-center gap-3">
    <div class="w-36 shrink-0 text-xs text-ccs-slate dark:text-ccs-dark-text-2">Mediano</div>
    <span class="inline-block w-2.5 h-2.5 rounded-full bg-ccs-blue dark:bg-ccs-dark-accent" aria-hidden="true"></span>
    <span class="inline-block w-2.5 h-2.5 rounded-full bg-ccs-success-fill dark:bg-ccs-dark-success-fill" aria-hidden="true"></span>
    <span class="inline-block w-2.5 h-2.5 rounded-full bg-ccs-warning-fill dark:bg-ccs-dark-warning-fill" aria-hidden="true"></span>
    <span class="inline-block w-2.5 h-2.5 rounded-full bg-ccs-error-fill dark:bg-ccs-dark-error-fill" aria-hidden="true"></span>
    <span class="inline-block w-2.5 h-2.5 rounded-full bg-ccs-slate dark:bg-ccs-dark-text-2" aria-hidden="true"></span>
  </div>
  <div class="flex flex-wrap items-center gap-3">
    <div class="w-36 shrink-0 text-xs text-ccs-slate dark:text-ccs-dark-text-2">Grande</div>
    <span class="inline-block w-3 h-3 rounded-full bg-ccs-blue dark:bg-ccs-dark-accent" aria-hidden="true"></span>
    <span class="inline-block w-3 h-3 rounded-full bg-ccs-success-fill dark:bg-ccs-dark-success-fill" aria-hidden="true"></span>
    <span class="inline-block w-3 h-3 rounded-full bg-ccs-warning-fill dark:bg-ccs-dark-warning-fill" aria-hidden="true"></span>
    <span class="inline-block w-3 h-3 rounded-full bg-ccs-error-fill dark:bg-ccs-dark-error-fill" aria-hidden="true"></span>
    <span class="inline-block w-3 h-3 rounded-full bg-ccs-slate dark:bg-ccs-dark-text-2" aria-hidden="true"></span>
  </div>
  <div class="flex flex-wrap items-center gap-3">
    <div class="w-36 shrink-0 text-xs text-ccs-slate dark:text-ccs-dark-text-2">Sobre un ícono</div>
    <span class="relative inline-flex text-ccs-ink dark:text-ccs-dark-text"><iconify-icon icon="solar:bell-bold" class="shrink-0 text-[24px]" aria-hidden="true"></iconify-icon><span class="absolute -right-0.5 -top-0.5 inline-block h-2.5 w-2.5 rounded-full ring-2 ring-white dark:ring-ccs-dark-surface bg-ccs-error-fill dark:bg-ccs-dark-error-fill" aria-hidden="true"></span></span>
    <span class="relative inline-flex text-ccs-ink dark:text-ccs-dark-text"><iconify-icon icon="solar:bell-bold" class="shrink-0 text-[24px]" aria-hidden="true"></iconify-icon><span class="absolute -right-0.5 -top-0.5 inline-block h-2.5 w-2.5 rounded-full ring-2 ring-white dark:ring-ccs-dark-surface bg-ccs-blue dark:bg-ccs-dark-accent" aria-hidden="true"></span></span>
  </div>
</div>
```

## Con ícono

```html
<div class="flex flex-col gap-4">
  <div class="flex flex-wrap items-center gap-3">
    <span class="inline-flex items-center gap-1 h-6 pl-2 pr-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-success-soft text-ccs-success dark:bg-ccs-dark-success-fill/10 dark:text-ccs-dark-success"><iconify-icon icon="solar:check-circle-bold" class="shrink-0 text-[14px]" aria-hidden="true"></iconify-icon>Aprobado</span>
    <span class="inline-flex items-center gap-1 h-6 pl-2 pr-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-warning-soft text-ccs-warning dark:bg-ccs-dark-warning-fill/10 dark:text-ccs-dark-warning"><iconify-icon icon="solar:clock-circle-bold" class="shrink-0 text-[14px]" aria-hidden="true"></iconify-icon>En revisión</span>
    <span class="inline-flex items-center gap-1 h-6 pl-2 pr-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-error-soft text-ccs-error dark:bg-ccs-dark-error-fill/10 dark:text-ccs-dark-error"><iconify-icon icon="solar:danger-triangle-bold" class="shrink-0 text-[14px]" aria-hidden="true"></iconify-icon>Urgente</span>
    <span class="inline-flex items-center gap-1 h-6 pl-2 pr-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-blue/10 text-ccs-blue dark:text-ccs-dark-accent dark:bg-ccs-dark-accent/10"><iconify-icon icon="solar:info-circle-bold" class="shrink-0 text-[14px]" aria-hidden="true"></iconify-icon>Información</span>
    <span class="inline-flex items-center gap-1 h-6 pl-2 pr-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-bg text-ccs-slate border border-ccs-line dark:text-ccs-dark-text-2 dark:border-ccs-dark-line dark:bg-ccs-dark-overlay"><iconify-icon icon="solar:pen-bold" class="shrink-0 text-[14px]" aria-hidden="true"></iconify-icon>Borrador</span>
  </div>
  <div class="flex flex-wrap items-center gap-3">
    <span class="inline-flex items-center gap-1 h-6 pl-2 pr-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-blue/10 text-ccs-blue dark:text-ccs-dark-accent dark:bg-ccs-dark-accent/10"><iconify-icon icon="solar:tag-bold" class="shrink-0 text-[14px]" aria-hidden="true"></iconify-icon>Comités</span>
    <span class="inline-flex items-center gap-1 h-6 pl-2 pr-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-bg text-ccs-slate border border-ccs-line dark:text-ccs-dark-text-2 dark:border-ccs-dark-line dark:bg-ccs-dark-overlay"><iconify-icon icon="solar:lock-bold" class="shrink-0 text-[14px]" aria-hidden="true"></iconify-icon>Exclusivo socios</span>
    <span class="inline-flex items-center gap-1 h-6 pl-2 pr-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-success-soft text-ccs-success dark:bg-ccs-dark-success-fill/10 dark:text-ccs-dark-success"><iconify-icon icon="solar:bolt-bold" class="shrink-0 text-[14px]" aria-hidden="true"></iconify-icon>Nuevo</span>
    <span class="inline-flex items-center gap-1 h-6 pl-2 pr-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-warning-soft text-ccs-warning dark:bg-ccs-dark-warning-fill/10 dark:text-ccs-dark-warning"><iconify-icon icon="solar:star-bold" class="shrink-0 text-[14px]" aria-hidden="true"></iconify-icon>Destacado</span>
  </div>
  <div class="flex flex-wrap items-center gap-3">
    <span class="inline-flex items-center gap-1 h-6 pl-2 pr-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-blue text-white dark:bg-ccs-blue-mid"><iconify-icon icon="solar:crown-bold" class="shrink-0 text-[14px]" aria-hidden="true"></iconify-icon>Premium</span>
    <span class="inline-flex items-center gap-1 h-6 pl-2 pr-2.5 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-blue text-white dark:bg-ccs-blue-mid"><iconify-icon icon="solar:verified-check-bold" class="shrink-0 text-[14px]" aria-hidden="true"></iconify-icon>Socio</span>
  </div>
  <div class="flex flex-wrap items-center gap-3">
    <span class="inline-flex items-center gap-1 h-6 pl-2 pr-2.5 rounded-full text-xs font-medium whitespace-nowrap border border-current bg-transparent text-ccs-success dark:text-ccs-dark-success"><iconify-icon icon="solar:check-circle-bold" class="shrink-0 text-[14px]" aria-hidden="true"></iconify-icon>Aprobado</span>
    <span class="inline-flex items-center gap-1 h-6 pl-2 pr-2.5 rounded-full text-xs font-medium whitespace-nowrap border border-dashed border-current bg-transparent text-ccs-error dark:text-ccs-dark-error"><iconify-icon icon="solar:danger-triangle-bold" class="shrink-0 text-[14px]" aria-hidden="true"></iconify-icon>Urgente</span>
  </div>
</div>
```

## Solo ícono

```html
<div class="flex flex-col gap-4">
  <div class="flex flex-wrap items-center gap-3">
    <span role="img" aria-label="Aprobado" class="inline-flex items-center justify-center h-6 w-6 rounded-full bg-ccs-success-soft text-ccs-success dark:bg-ccs-dark-success-fill/10 dark:text-ccs-dark-success"><iconify-icon icon="solar:check-circle-bold" class="shrink-0 text-[14px]" aria-hidden="true"></iconify-icon></span>
    <span role="img" aria-label="En revisión" class="inline-flex items-center justify-center h-6 w-6 rounded-full bg-ccs-warning-soft text-ccs-warning dark:bg-ccs-dark-warning-fill/10 dark:text-ccs-dark-warning"><iconify-icon icon="solar:clock-circle-bold" class="shrink-0 text-[14px]" aria-hidden="true"></iconify-icon></span>
    <span role="img" aria-label="Urgente" class="inline-flex items-center justify-center h-6 w-6 rounded-full bg-ccs-error-soft text-ccs-error dark:bg-ccs-dark-error-fill/10 dark:text-ccs-dark-error"><iconify-icon icon="solar:danger-triangle-bold" class="shrink-0 text-[14px]" aria-hidden="true"></iconify-icon></span>
    <span role="img" aria-label="Información" class="inline-flex items-center justify-center h-6 w-6 rounded-full bg-ccs-blue/10 text-ccs-blue dark:text-ccs-dark-accent dark:bg-ccs-dark-accent/10"><iconify-icon icon="solar:info-circle-bold" class="shrink-0 text-[14px]" aria-hidden="true"></iconify-icon></span>
    <span role="img" aria-label="Socio" class="inline-flex items-center justify-center h-6 w-6 rounded-full bg-ccs-blue text-white dark:bg-ccs-blue-mid"><iconify-icon icon="solar:verified-check-bold" class="shrink-0 text-[14px]" aria-hidden="true"></iconify-icon></span>
  </div>
</div>
```

## Quitar

```html
<div class="flex flex-col gap-4">
  <div class="flex flex-wrap items-center gap-3">
    <span class="inline-flex items-center gap-1 h-6 pl-2 pr-2 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-blue/10 text-ccs-blue dark:text-ccs-dark-accent dark:bg-ccs-dark-accent/10"><iconify-icon icon="solar:tag-bold" class="shrink-0 text-[14px]" aria-hidden="true"></iconify-icon>Comités<button type="button" aria-label="Quitar Comités" class="-mr-0.5 rounded-full px-0.5 leading-none opacity-70 hover:opacity-100 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent">×</button></span>
    <span class="inline-flex items-center gap-1 h-6 pl-2 pr-2 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-success-soft text-ccs-success dark:bg-ccs-dark-success-fill/10 dark:text-ccs-dark-success"><iconify-icon icon="solar:check-circle-bold" class="shrink-0 text-[14px]" aria-hidden="true"></iconify-icon>Sostenibilidad<button type="button" aria-label="Quitar Sostenibilidad" class="-mr-0.5 rounded-full px-0.5 leading-none opacity-70 hover:opacity-100 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent">×</button></span>
    <span class="inline-flex items-center gap-1 h-6 pl-2 pr-2 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-bg text-ccs-slate border border-ccs-line dark:text-ccs-dark-text-2 dark:border-ccs-dark-line dark:bg-ccs-dark-overlay"><iconify-icon icon="solar:pen-bold" class="shrink-0 text-[14px]" aria-hidden="true"></iconify-icon>Borrador<button type="button" aria-label="Quitar Borrador" class="-mr-0.5 rounded-full px-0.5 leading-none opacity-70 hover:opacity-100 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent">×</button></span>
    <span class="inline-flex items-center gap-1 h-6 pl-2 pr-2 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-blue text-white dark:bg-ccs-blue-mid"><iconify-icon icon="solar:crown-bold" class="shrink-0 text-[14px]" aria-hidden="true"></iconify-icon>Premium<button type="button" aria-label="Quitar Premium" class="-mr-0.5 rounded-full px-0.5 leading-none opacity-70 hover:opacity-100 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white dark:focus-visible:ring-ccs-dark-accent">×</button></span>
  </div>
  <div class="flex flex-wrap items-center gap-3">
    <span class="inline-flex items-center gap-1 h-6 pl-2.5 pr-2 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-blue/10 text-ccs-blue dark:text-ccs-dark-accent dark:bg-ccs-dark-accent/10">Comités<button type="button" aria-label="Quitar Comités" class="-mr-0.5 rounded-full px-0.5 leading-none opacity-70 hover:opacity-100 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent">×</button></span>
    <span class="inline-flex items-center gap-1 h-6 pl-2.5 pr-2 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-success-soft text-ccs-success dark:bg-ccs-dark-success-fill/10 dark:text-ccs-dark-success">Sostenibilidad<button type="button" aria-label="Quitar Sostenibilidad" class="-mr-0.5 rounded-full px-0.5 leading-none opacity-70 hover:opacity-100 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent">×</button></span>
    <span class="inline-flex items-center gap-1 h-6 pl-2.5 pr-2 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-bg text-ccs-slate border border-ccs-line dark:text-ccs-dark-text-2 dark:border-ccs-dark-line dark:bg-ccs-dark-overlay">Borrador<button type="button" aria-label="Quitar Borrador" class="-mr-0.5 rounded-full px-0.5 leading-none opacity-70 hover:opacity-100 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent">×</button></span>
    <span class="inline-flex items-center gap-1 h-6 pl-2.5 pr-2 rounded-full text-xs font-medium whitespace-nowrap bg-ccs-blue text-white dark:bg-ccs-blue-mid">Premium<button type="button" aria-label="Quitar Premium" class="-mr-0.5 rounded-full px-0.5 leading-none opacity-70 hover:opacity-100 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white dark:focus-visible:ring-ccs-dark-accent">×</button></span>
  </div>
</div>
```

## En un texto

```html
<div class="flex flex-col gap-5">
  <div class="text-ccs-h1-hero-sm lg:text-ccs-h1-hero flex flex-wrap items-center gap-x-3 gap-y-1">H1 Hero<span class="inline-flex items-center gap-1.5 h-7 px-3 rounded-full text-sm font-medium whitespace-nowrap normal-case tracking-normal bg-ccs-success-soft text-ccs-success dark:bg-ccs-dark-success-fill/10 dark:text-ccs-dark-success">Nuevo</span></div>
  <div class="text-ccs-h1 flex flex-wrap items-center gap-x-3 gap-y-1">H1<span class="inline-flex items-center gap-1.5 h-7 px-3 rounded-full text-sm font-medium whitespace-nowrap normal-case tracking-normal bg-ccs-success-soft text-ccs-success dark:bg-ccs-dark-success-fill/10 dark:text-ccs-dark-success">Nuevo</span></div>
  <div class="text-ccs-h2 flex flex-wrap items-center gap-x-3 gap-y-1">H2<span class="inline-flex items-center gap-1.5 h-7 px-3 rounded-full text-sm font-medium whitespace-nowrap normal-case tracking-normal bg-ccs-success-soft text-ccs-success dark:bg-ccs-dark-success-fill/10 dark:text-ccs-dark-success">Nuevo</span></div>
  <div class="text-ccs-h3 flex flex-wrap items-center gap-x-3 gap-y-1">H3<span class="inline-flex items-center gap-1 h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap normal-case tracking-normal bg-ccs-success-soft text-ccs-success dark:bg-ccs-dark-success-fill/10 dark:text-ccs-dark-success">Nuevo</span></div>
  <div class="text-ccs-body-xl flex flex-wrap items-center gap-x-3 gap-y-1">Body XL<span class="inline-flex items-center gap-1 h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap normal-case tracking-normal bg-ccs-success-soft text-ccs-success dark:bg-ccs-dark-success-fill/10 dark:text-ccs-dark-success">Nuevo</span></div>
  <div class="text-ccs-body-l flex flex-wrap items-center gap-x-3 gap-y-1">Body L<span class="inline-flex items-center gap-1 h-6 px-2.5 rounded-full text-xs font-medium whitespace-nowrap normal-case tracking-normal bg-ccs-success-soft text-ccs-success dark:bg-ccs-dark-success-fill/10 dark:text-ccs-dark-success">Nuevo</span></div>
  <div class="text-ccs-body flex flex-wrap items-center gap-x-3 gap-y-1">Body<span class="inline-flex items-center gap-1 h-5 px-2 rounded-full text-xs font-medium whitespace-nowrap normal-case tracking-normal bg-ccs-success-soft text-ccs-success dark:bg-ccs-dark-success-fill/10 dark:text-ccs-dark-success">Nuevo</span></div>
  <div class="text-xs leading-4 uppercase tracking-wider text-ccs-slate font-medium dark:text-ccs-dark-text-2 flex flex-wrap items-center gap-x-3 gap-y-1">Caption<span class="inline-flex items-center gap-1 h-5 px-2 rounded-full text-xs font-medium whitespace-nowrap normal-case tracking-normal bg-ccs-success-soft text-ccs-success dark:bg-ccs-dark-success-fill/10 dark:text-ccs-dark-success">Nuevo</span></div>
</div>
```

## En un botón

```html
<div class="flex flex-col gap-4">
  <div class="flex flex-wrap items-center gap-3">
    <div class="w-36 shrink-0 text-xs text-ccs-slate dark:text-ccs-dark-text-2">Pequeño · 32 px</div>
    <button type="button" class="h-8 px-3 text-sm font-medium gap-1.5 rounded-ccs bg-ccs-blue text-white hover:bg-ccs-blue-mid transition shadow-ccs-sm inline-flex items-center dark:bg-ccs-blue-mid dark:hover:bg-ccs-blue focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100">Mensajes<span class="inline-flex items-center justify-center h-5 min-w-5 px-1.5 rounded-full text-xs font-semibold tabular-nums bg-white text-ccs-blue">3</span></button>
    <button type="button" class="h-8 px-3 text-sm font-medium gap-1.5 rounded-ccs border border-ccs-line-strong text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue transition bg-white inline-flex items-center dark:border-ccs-dark-line-strong dark:text-ccs-dark-text dark:hover:border-ccs-dark-text dark:hover:text-ccs-dark-text dark:bg-ccs-dark-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100">Mensajes<span class="inline-flex items-center justify-center h-5 min-w-5 px-1.5 rounded-full text-xs font-semibold tabular-nums bg-ccs-blue text-white dark:bg-ccs-blue-mid">3</span></button>
    <button type="button" class="h-8 px-3 text-sm font-medium gap-1.5 rounded-ccs border border-ccs-line-strong text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue transition bg-white inline-flex items-center dark:border-ccs-dark-line-strong dark:text-ccs-dark-text dark:hover:border-ccs-dark-text dark:hover:text-ccs-dark-text dark:bg-ccs-dark-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100">Informes<span class="inline-flex items-center h-5 px-2 rounded-full text-xs font-medium bg-ccs-success-soft text-ccs-success dark:bg-ccs-dark-success-fill/10 dark:text-ccs-dark-success">Nuevo</span></button>
  </div>
  <div class="flex flex-wrap items-center gap-3">
    <div class="w-36 shrink-0 text-xs text-ccs-slate dark:text-ccs-dark-text-2">Mediano · 40 px</div>
    <button type="button" class="h-10 px-4 text-sm font-medium gap-2 rounded-ccs bg-ccs-blue text-white hover:bg-ccs-blue-mid transition shadow-ccs-sm inline-flex items-center dark:bg-ccs-blue-mid dark:hover:bg-ccs-blue focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100">Mensajes<span class="inline-flex items-center justify-center h-5 min-w-5 px-1.5 rounded-full text-xs font-semibold tabular-nums bg-white text-ccs-blue">3</span></button>
    <button type="button" class="h-10 px-4 text-sm font-medium gap-2 rounded-ccs border border-ccs-line-strong text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue transition bg-white inline-flex items-center dark:border-ccs-dark-line-strong dark:text-ccs-dark-text dark:hover:border-ccs-dark-text dark:hover:text-ccs-dark-text dark:bg-ccs-dark-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100">Mensajes<span class="inline-flex items-center justify-center h-5 min-w-5 px-1.5 rounded-full text-xs font-semibold tabular-nums bg-ccs-blue text-white dark:bg-ccs-blue-mid">3</span></button>
    <button type="button" class="h-10 px-4 text-sm font-medium gap-2 rounded-ccs border border-ccs-line-strong text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue transition bg-white inline-flex items-center dark:border-ccs-dark-line-strong dark:text-ccs-dark-text dark:hover:border-ccs-dark-text dark:hover:text-ccs-dark-text dark:bg-ccs-dark-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100">Informes<span class="inline-flex items-center h-5 px-2 rounded-full text-xs font-medium bg-ccs-success-soft text-ccs-success dark:bg-ccs-dark-success-fill/10 dark:text-ccs-dark-success">Nuevo</span></button>
  </div>
  <div class="flex flex-wrap items-center gap-3">
    <div class="w-36 shrink-0 text-xs text-ccs-slate dark:text-ccs-dark-text-2">Grande · 48 px</div>
    <button type="button" class="h-12 px-6 text-base font-medium gap-2 rounded-ccs bg-ccs-blue text-white hover:bg-ccs-blue-mid transition shadow-ccs-sm inline-flex items-center dark:bg-ccs-blue-mid dark:hover:bg-ccs-blue focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100">Mensajes<span class="inline-flex items-center justify-center h-6 min-w-6 px-2 rounded-full text-xs font-semibold tabular-nums bg-white text-ccs-blue">3</span></button>
    <button type="button" class="h-12 px-6 text-base font-medium gap-2 rounded-ccs border border-ccs-line-strong text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue transition bg-white inline-flex items-center dark:border-ccs-dark-line-strong dark:text-ccs-dark-text dark:hover:border-ccs-dark-text dark:hover:text-ccs-dark-text dark:bg-ccs-dark-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100">Mensajes<span class="inline-flex items-center justify-center h-6 min-w-6 px-2 rounded-full text-xs font-semibold tabular-nums bg-ccs-blue text-white dark:bg-ccs-blue-mid">3</span></button>
    <button type="button" class="h-12 px-6 text-base font-medium gap-2 rounded-ccs border border-ccs-line-strong text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue transition bg-white inline-flex items-center dark:border-ccs-dark-line-strong dark:text-ccs-dark-text dark:hover:border-ccs-dark-text dark:hover:text-ccs-dark-text dark:bg-ccs-dark-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100">Informes<span class="inline-flex items-center h-6 px-2.5 rounded-full text-xs font-medium bg-ccs-success-soft text-ccs-success dark:bg-ccs-dark-success-fill/10 dark:text-ccs-dark-success">Nuevo</span></button>
  </div>
  <div class="flex flex-wrap items-center gap-3">
    <div class="w-36 shrink-0 text-xs text-ccs-slate dark:text-ccs-dark-text-2">Extragrande · 56 px</div>
    <button type="button" class="h-14 px-8 text-base font-semibold gap-2.5 rounded-ccs bg-ccs-blue text-white hover:bg-ccs-blue-mid transition shadow-ccs-sm inline-flex items-center dark:bg-ccs-blue-mid dark:hover:bg-ccs-blue focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100">Mensajes<span class="inline-flex items-center justify-center h-7 min-w-7 px-2 rounded-full text-sm font-semibold tabular-nums bg-white text-ccs-blue">3</span></button>
    <button type="button" class="h-14 px-8 text-base font-semibold gap-2.5 rounded-ccs border border-ccs-line-strong text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue transition bg-white inline-flex items-center dark:border-ccs-dark-line-strong dark:text-ccs-dark-text dark:hover:border-ccs-dark-text dark:hover:text-ccs-dark-text dark:bg-ccs-dark-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100">Mensajes<span class="inline-flex items-center justify-center h-7 min-w-7 px-2 rounded-full text-sm font-semibold tabular-nums bg-ccs-blue text-white dark:bg-ccs-blue-mid">3</span></button>
    <button type="button" class="h-14 px-8 text-base font-semibold gap-2.5 rounded-ccs border border-ccs-line-strong text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue transition bg-white inline-flex items-center dark:border-ccs-dark-line-strong dark:text-ccs-dark-text dark:hover:border-ccs-dark-text dark:hover:text-ccs-dark-text dark:bg-ccs-dark-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100">Informes<span class="inline-flex items-center h-7 px-3 rounded-full text-sm font-medium bg-ccs-success-soft text-ccs-success dark:bg-ccs-dark-success-fill/10 dark:text-ccs-dark-success">Nuevo</span></button>
  </div>
</div>
```
