Tabs sirven para alternar entre vistas que ocupan el mismo espacio y
pertenecen al mismo nivel — pedidos activos vs entregados, hoy vs semana.
Si las vistas son secciones distintas de la página, usa anclas o navegación;
si solo hay dos opciones excluyentes, considera un switch.
Default
Tres tabs: la primera está activa (fondo blanco, sombra) y las otras dos quedan en el mismo plano del fondo del list.
3 pedidos en marcha
Mesa 12 (curry verde), Mesa 14 (pad thai × 2), Mesa 7 (tom yum). En la barra desde hace 4 min.
Con disabled
Cuando una tab no aplica al contexto (por ejemplo, no hay pedidos
cancelados), se desactiva con opacity-50 pointer-events-none.
No la escondas — mantenla visible para que el usuario sepa que existe.
3 pedidos en marcha
No hay pedidos cancelados esta noche — por eso esa tab queda apagada.
Familias de marca
El tab activo puede usar cualquier familia de la paleta — útil para
diferenciar contextos (zona del restaurante, categoría del menú) o para
alinear el color con el contenido del panel. Convención: fondo en tono
100, texto en 700, sombra shadow-ds-sm.
Estado theme: ⚠ pendiente verificar.