Tablist

Píldora flotante inspirada en el UITabBar de Apple. Permite alternar entre vistas equivalentes manteniendo el contexto. La pestaña activa se eleva sobre un fondo blanco con el texto en morado Lexy.

Contenido de Tab 1

Default

Cuándo usar

Alternar entre vistas equivalentes en una misma pantalla.
Filtros mutuamente excluyentes que afectan al contenido inmediato debajo.
Sub-secciones de un panel, sin necesidad de una página nueva.
Navegación entre causas o documentos abiertos en el espacio de trabajo.

Cuándo no usarlo

Para acciones primarias: usa botones.
Si la navegación cambia la URL principal: usa el menú lateral o el header.

Cerrables

Pestañas con cierre

Cuando el usuario abre causas, documentos o vistas dinámicas, cada pestaña incluye una x al final para cerrarla. La pestaña activa muestra el icono en morado Lexy; las inactivas en gris.

Con iconos

Tabs con icono y label

Acompaña cada label con un icono cuando ayude a identificar la sección de un vistazo. El icono se rellena en la pestaña activa para reforzar el estado.

Tamaño grande

Tabs grandes (size lg)

Usa el tamaño grande cuando las tabs sean el control principal de una vista amplia o el contenido a su lado tenga mucha jerarquía. Celdas de 40 px de alto y tipografía 15 px.

Con contador

Tabs con badge numérico

Añade un contador junto al label cuando el número de elementos sea relevante para decidir a qué pestaña entrar. El badge se rellena en morado Lexy con texto blanco cuando la tab está activa.

Anatomía

Estructura visual

Contenedor con fondo gris claro (#eeeef0), padding interno 3 px y radio 10 px.
Cada celda mide 30 px de alto, 12 px de padding horizontal y radio 7 px.
La celda activa rellena de blanco con sombra suave; las inactivas usan blanco translúcido para destacar sobre el contenedor.
Texto del activo en morado Lexy 600; inactivos en gris medio 500 para evitar peso visual excesivo.
Iconos opcionales a 18 px, alineados al inicio de la celda.

Estados

Activo, inactivo y deshabilitado

Las pestañas deshabilitadas se atenúan al 40 por ciento y no responden al clic. Úsalas con moderación; suele ser preferible ocultar la sección.

Accesibilidad

Roles y teclado

El contenedor expone role="tablist" con aria-label descriptivo.
Cada celda usa role="tab" y aria-selected. Solo la activa lleva tabIndex 0; las demás, -1.
El contenido vinculado usa role="tabpanel" con aria-labelledby apuntando al id del tab activo.
Foco visible con anillo Lexy purple translúcido en cualquier celda.
Contraste mínimo AA del texto en cualquier estado.