Insignias y píldoras de estado en CSS

Etiquetas pequeñas que deben seguir legibles en todo tamaño y en ambos temas.

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.2em 0.65em;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--badge-ink, #1f2937);
  background: color-mix(in oklab, var(--badge-ink, #1f2937) 12%, white);
}

.badge.ok { --badge-ink: #15803d; }
.badge.warn { --badge-ink: #b45309; }
.badge.bad { --badge-ink: #b91c1c; }

Cómo funciona

1. inline-flex centra el texto y deja que un ícono se siente al lado.
2. Un radio de píldora es cualquier número mayor que la mitad del alto.
3. color-mix deriva el fondo del color del texto, así ambos van al paso.

Palabras clave y builtins usados aquí

• background
• color
• display
• em
• gap
• padding
• px
• rem

El intento, en números

Líneas

16

Caracteres a escribir

386

Tokens

100

Ritmo de tres estrellas

85 tpm

Al ritmo de tres estrellas de 85 tokens por minuto, este intento toma unos 71 segundos.

Escribe este fragmento

Paso 2 de 4 en Superficies; paso 4 de 13 en Dar estilo a componentes.

← Anterior Siguiente →