Componentes de feedback
Componentes que cuentan lo que está pasando: toasts, alertas en línea, barras y círculos de progreso, spinners, skeletons y estados vacíos.
Los spinners esperan antes de aparecer y luego se quedan lo suficiente para leerse, así que el trabajo rápido nunca parpadea, y cada cambio se anuncia a los lectores de pantalla.
- AlertMensajes en línea para estado y comentarios, con una superficie neutra, un icono de color y un descarte que se colapsa con suavidad.
- EmptyUn marcador de posición para pantallas que aún no tienen nada que mostrar, con un icono, un mensaje y la siguiente acción.
- ProgressUna barra o anillo que muestra cuánto ha avanzado una tarea, se suaviza entre actualizaciones y se desliza mientras el total es desconocido.
- SkeletonMarcadores de posición que esperan 150ms antes de mostrarse, toman el tamaño exacto del contenido que envuelven y lo hacen aparecer con un fundido sin mover nada.
- SpinnerUn indicador de carga con marcas al estilo Apple o un anillo que respira, que puede esperar antes de mostrarse y permanecer el tiempo suficiente para no parpadear.
- ToastMensajes breves que se apilan con orden, se expanden al pasar el cursor, se descartan deslizando y convierten un estado de carga en éxito o error en el mismo lugar.
Usados en bloques Pro
Bloques para productos de IA construidos con estos componentes.
- MarkdownRenderizado de Markdown para respuestas de IA. Cubre streaming sin sintaxis a medio escribir, tablas que puedes copiar y citas en línea.
- BillingLa página de plan y uso de un producto de IA. Cubre créditos que se agotan a mitad de ciclo, cambios de plan con prorrateo y errores de tarjeta.
- Diff ReviewUna revisión de las ediciones de archivos de un agente antes de aplicarlas. Cubre aceptar o rechazar cada cambio, comentarios de vuelta al agente y ediciones aún en streaming.
- API keysLa página de claves de API de un producto de IA. Cubre un secreto que se muestra una sola vez, revocar con deshacer y rotación con periodo de gracia.
- SecurityLa sección Seguridad de los ajustes de un producto de IA. Cubre sesiones, dos factores con códigos de recuperación y eliminación tras una confirmación escrita.
- SettingsLa página de ajustes de un producto de IA. Cubre una barra de guardado que aparece solo cuando algo cambió, errores de campo y estados de carga.