Lenguaje de componentes

Showcase de componentes

Inventario vivo de bloques reutilizables: gráficos, tablas, estados de feedback, cards y composición responsive.

Acciones y estados

Botones y badges codifican jerarquía y estado.

Link a docs

NeutralÉxitoAdvertenciaPeligroInfo

Lenguaje de formularios

Labels visibles y textos de ayuda son obligatorios.

Nombre del espacio

Usado en navegación, invitaciones y notificaciones.

Rol por defecto

Nota de revisión

Ingresos y activación

Bloque de gráfico responsive con contexto visible, unidades y colores accesibles.

Muestra activa

Tabla de riesgo de clientes

Tabla desktop con cards mobile y acciones de fila visibles.

5 filas

Vista ejecutiva

Ciclo de vida, riesgo y responsable para revisión de liderazgo. Ordenado por cliente en forma ascendente.


Atlas Cloud	Scale	Pendiente	Medio	Mateo Silva
Faro Retail	Team	Suspendido	Alto	Iris Vega
Kinetic Finance	Enterprise	Activo	Bajo	Nora Chen
Northwind Labs	Enterprise	Activo	Bajo	Ana Lopez
Orbit Ops	Scale	Activo	Medio	Theo Ruiz

Atlas Cloud

Scale · Mateo Silva

Pendiente

Nivel de riesgo: Medio

Faro Retail

Team · Iris Vega

Suspendido

Nivel de riesgo: Alto

Kinetic Finance

Enterprise · Nora Chen

Activo

Nivel de riesgo: Bajo

Northwind Labs

Enterprise · Ana Lopez

Activo

Nivel de riesgo: Bajo

Orbit Ops

Scale · Theo Ruiz

Activo

Nivel de riesgo: Medio

Estado de carga

Usá skeleton rows o un spinner contenido cuando los datos se refrescan sin ocultar la estructura de tabla.

Estado vacío

Explicá qué crea el primer registro y mantené cerca la acción primaria Agregar.

Sin resultados

Mantené filtros visibles y ofrecé un camino claro de vuelta a la vista guardada.

Error recuperable

Indicá qué falló, preservá datos actuales si es seguro y ofrecé reintento en lugar de una tabla en blanco.

Vocabulario de toasts y alertas

Cada acción recibe un patrón consistente: toast, banner, diálogo o mensaje inline.

Éxito

success

Miembro del equipo invitado correctamente.

Advertencia

warning

La cuota de facturación llega al 82% hoy.

Permiso denegado

danger

Necesitás acceso Admin para revocar keys.

Cargando

info

Exportando workbook...

Deshacer

neutral

Cliente archivado. Deshacer disponible por 30 segundos.

Centro de notificaciones

Agrupado, accionable y legible.

Invitación aceptada

Hace 2 min

Lucia se sumó a Design Ops con acceso de edición.

Cuota cerca del límite

Hace 18 min

El uso de API llegó al 82% de este ciclo.

Permiso denegado

Hace 42 min

Una exportación de facturación fue bloqueada para un rol visualizador.

Reporte listo

Hace 1 h

El workbook de retención de junio está listo para revisar.

Diálogo de confirmación destructiva

Las acciones peligrosas usan copy explícito, acciones secundarias separadas y consecuencias visibles.

¿Eliminar API key?

Esto revoca inmediatamente el acceso para toda integración que use esta key. Esta acción no se puede deshacer.

Reglas de banners y estados inline

Usá el patrón más chico que dé suficiente contexto y recuperación.

Banner de sistema

Mantenimiento, incidentes, trial y avisos de cuota van arriba del contenido.

Error recuperable

Indicá qué falló, qué datos están a salvo y cómo reintentar.

Denegado inline

Mantené visible el módulo bloqueado y explicá el rol o permiso requerido.