Badges

Paquete: @tiendana/web-foundation

Insignias de entorno. Hoy incluye la cinta .test-site, que marca una aplicación como sitio de pruebas o no productivo.

Características

✅ Cinta diagonal - Esquina superior derecha, rotada 45 grados
✅ No intercepta clics - pointer-events: none
✅ Fija en el viewport - Permanece visible al hacer scroll
✅ Solo CSS - Se activa agregando un elemento con la clase

Cinta de sitio de pruebas

Cargando demo...

Ver código

Colócala una vez en el layout raíz de la aplicación, solo en los entornos que no son producción:

<body>
  <div class="test-site">Desarrollo</div>
  <app-root></app-root>
</body>

Referencia de clases

Clase	Descripción
.test-site	Cinta fija: position: fixed, right de -36px, top de 28px, rotada 45 grados, z-index: 10, 150px de ancho (máximo 200px), texto centrado en mayúsculas con color --color-white, degradado rojo y radio --border-radius-lg

Tamaño de texto

La cinta declara font-size: var(--font-size-2xs), una propiedad que web-foundation no define. Al no resolverse, el tamaño se hereda del contexto: define font-size en la cinta o en su ancestro si necesitas un tamaño concreto.

Interacción con otros elementos fijos

Con z-index: 10, la cinta queda por debajo de los dropdowns (--z-index-dropdown, 1000), modales y snackbars, pero por encima del contenido normal. Revisa que no tape controles de la esquina superior derecha, como el avatar o las notificaciones.

Accesibilidad

• El texto de la cinta se anuncia como contenido normal. Si en tu entorno resulta ruido para lectores de pantalla, agrega aria-hidden="true" y deja el entorno en el <title> de la página.

Ver También

• Chip - Etiquetas en línea para estados