Badge

Usa .badge en un <span> con un modificador de rol. Por defecto el tono es suave; badge--solid lo rellena con el color del rol.

Variantes

MóvilTabletEscritorioCompleto

HTML

<span class="badge">Neutro</span>
<span class="badge badge--primary">Primary</span>
<span class="badge badge--secondary">Secondary</span>
<span class="badge badge--success">Success</span>
<span class="badge badge--danger">Danger</span>
<span class="badge badge--warning">Warning</span>
<span class="badge badge--info">Info</span>

React

export default function BadgeVariantes() {
  return (
    <>
      <span className="badge">Neutro</span>
      <span className="badge badge--primary">Primary</span>
      <span className="badge badge--secondary">Secondary</span>
      <span className="badge badge--success">Success</span>
      <span className="badge badge--danger">Danger</span>
      <span className="badge badge--warning">Warning</span>
      <span className="badge badge--info">Info</span>
    </>
  );
}

Sólidos

MóvilTabletEscritorioCompleto

HTML

<span class="badge badge--solid">Neutro</span>
<span class="badge badge--primary badge--solid">Primary</span>
<span class="badge badge--secondary badge--solid">Secondary</span>
<span class="badge badge--success badge--solid">Success</span>
<span class="badge badge--danger badge--solid">Danger</span>
<span class="badge badge--warning badge--solid">Warning</span>
<span class="badge badge--info badge--solid">Info</span>

React

export default function BadgeSolidos() {
  return (
    <>
      <span className="badge badge--solid">Neutro</span>
      <span className="badge badge--primary badge--solid">Primary</span>
      <span className="badge badge--secondary badge--solid">Secondary</span>
      <span className="badge badge--success badge--solid">Success</span>
      <span className="badge badge--danger badge--solid">Danger</span>
      <span className="badge badge--warning badge--solid">Warning</span>
      <span className="badge badge--info badge--solid">Info</span>
    </>
  );
}

Tamaños

MóvilTabletEscritorioCompleto

HTML

<span class="badge badge--primary badge--sm">Pequeño</span>
<span class="badge badge--primary">Normal</span>

React

export default function BadgeTamanos() {
  return (
    <>
      <span className="badge badge--primary badge--sm">Pequeño</span>
      <span className="badge badge--primary">Normal</span>
    </>
  );
}

Con íconos y en títulos

El badge toma el tamaño del texto que lo rodea, así que se puede usar dentro de un título.

MóvilTabletEscritorioCompleto

HTML

<span class="badge badge--success">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5" /></svg>
  Publicado
</span>
<h3>Novedades <span class="badge badge--primary badge--solid badge--sm">Nuevo</span></h3>

React

export default function BadgeIconos() {
  return (
    <>
      <span className="badge badge--success">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5" /></svg>
        Publicado
      </span>
      <h3>Novedades <span className="badge badge--primary badge--solid badge--sm">Nuevo</span></h3>
    </>
  );
}

Accesibilidad

• El badge es texto: su contenido debe tener sentido leído en voz alta. Si solo muestra un número, agrega contexto con texto oculto o aria-label en el elemento que lo contiene.
• Los íconos van con aria-hidden="true".
• Con los colores por defecto, estos tonos quedan bajo el contraste AA (4,5:1): suave secondary (2,5:1), warning (2,5:1) e info (3,5:1), y sólido success (3,4:1).

Clases

Clase	Uso
badge	Base. Sin rol es neutro.
badge--{rol}	Tono suave: primary, secondary, success, danger, warning, info.
badge--solid	Relleno con el color del rol. Se combina con badge--{rol}.
badge--sm	Pequeño.

Variables

Variable	Valor por defecto	Uso
--ds-badge-bg	color-mix(in srgb, var(--ds-color-text) 8%, var(--ds-color-surface))	Fondo.
--ds-badge-color	var(--ds-color-text)	Color del texto.
--ds-badge-border-color	transparent	Color del borde.
--ds-badge-solid-bg	var(--ds-color-text)	Fondo de la versión sólida (badge--solid).
--ds-badge-solid-color	var(--ds-color-surface)	Texto de la versión sólida.
--ds-badge-padding-y	0.3rem	Espacio vertical interno.
--ds-badge-padding-x	1rem	Espacio horizontal interno.
--ds-badge-gap	0.375rem	Separación entre ícono y texto.
--ds-badge-font-size	var(--ds-font-size-sm)
--ds-badge-font-weight	var(--ds-font-weight-regular)
--ds-badge-line-height	var(--ds-line-height-base)
--ds-badge-radius	var(--ds-radius-full)	Radio de las esquinas (píldora).