Componentes superpuestos
Todo lo que flota sobre la página: diálogos y confirmaciones, paneles laterales y drawers deslizables, popovers, hover cards, tooltips, menús desplegables y contextuales, una barra de menús y una paleta de comandos ⌘K.
El foco entra al abrirse y vuelve al cerrarse, se mantienen en pantalla hasta 320 píxeles de ancho y en los móviles los diálogos se convierten en hojas inferiores deslizables.
- Alert dialogUn diálogo de confirmación para acciones destructivas o importantes que espera el trabajo asíncrono y se convierte en una hoja inferior en móviles.
- CommandUna lista de acciones con búsqueda, en línea o como paleta ⌘K, con páginas, atajos y coincidencias resaltadas.
- Context menuUn menú de acciones con clic derecho o pulsación larga, con submenús, elementos de casilla y de radio, y respuesta al mantener pulsado en pantallas táctiles.
- DialogUna ventana sobre la página para formularios y tareas concretas, con encabezado y pie fijados, anidamiento y una hoja inferior deslizable en móviles.
- DrawerUn panel que se desliza desde cualquier borde y sigue tu dedo, con puntos de anclaje, un tirador funcional y drawers anidados que se apilan.
- Dropdown menuUn menú de acciones y opciones tras un botón, con grupos, submenús, elementos de casilla y de radio, y atajos.
- Hover cardUna tarjeta de vista previa que se abre al pasar el cursor o enfocar un enlace, para contenido que los usuarios videntes pueden ojear.
- MenubarUna barra de menús al estilo de escritorio con un único resaltado que se desliza entre los menús abiertos y cambia al instante cuando te desplazas por ellos.
- PopoverUn panel flotante anclado a un trigger que se redimensiona suavemente con su contenido y sigue la dirección del trigger.
- SheetUn panel que se desliza desde cualquier borde, con deslizamiento para descartar, bloqueo de scroll y anidamiento apilado.
- TooltipUna pista breve al pasar el cursor o enfocar con el teclado que se abre tras un breve reposo, cambia al instante entre vecinos y muestra atajos.
Usados en bloques Pro
Bloques para productos de IA construidos con estos componentes.
- 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.
- 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.
- NotificationsLa sección Notificaciones de los ajustes de un producto de IA. Cubre una cuadrícula de canal por evento, horas de silencio y el permiso del navegador para push.
- 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.
- TeamLa página de equipo de los ajustes del espacio de trabajo de un producto de IA. Cubre asientos que se agotan, invitaciones pendientes y transferencia de propiedad con confirmación escrita.