Un tooltip ofrece una pista corta. Un popover puede contener más texto, opciones o botones.
Usa una descripción emergente cuando unas pocas palabras sean suficientes. Usa un popover cuando una persona deba leer o hacer más sin salir de la página. Abrir guíaCompara patrones de UI que son fáciles de confundir
Dos patrones pueden parecerse pero realizar diferentes tareas. Usa estas reglas cortas para escoger el correcto.
Un modal detiene la página hasta que terminas la tarea. Un popover se queda al lado de su botón y deja que la página siga funcionando.
Usa un modal para una tarea que debe terminar primero. Usa un popover para detalles adicionales o una acción pequeña. Abrir guía Menú desplegable y menú contextual — Paquete de aprendizajeDropdown & Context Menu — Learning Bundle vs. SeleccionarSelect vs. Cuadro combinado editableEditable Combobox
Un menú desplegable ejecuta acciones. Un select elige de una lista fija. Un combobox también te deja escribir o buscar.
Usa un menú para acciones. Usa un selector para una lista fija corta. Usa un cuadro combinado para una lista larga o buscable. Abrir guíaLas pestañas cambian entre secciones de contenido. Un control segmentado cambia un modo, filtro o valor pequeño en la misma vista.
Usa pestañas para secciones de contenido separadas. Usa un control segmentado para unas pocas opciones cortas que cambian el mismo contenido. Abrir guíaUn Accordion abre secciones en una página y puede mantener varias abiertas. Las Tabs muestran una sección a la vez en un mismo espacio compartido.
Usa un acordeón para preguntas o secciones que las personas puedan leer juntas. Usa pestañas para pocas vistas separadas cuando solo una importe a la vez. Abrir guíaUn toast es un mensaje corto que no detiene la tarea. Una alerta se queda o interrumpe porque no debes pasarla por alto.
Usa un mensaje breve para confirmar una acción completada. Usa una alerta para un fallo, peligro o elección que necesite atención inmediata. Abrir guíaUn tooltip muestra una etiqueta o pista corta. Una hover card muestra una vista previa más completa de una persona, elemento o enlace.
Usa una descripción emergente cuando unas pocas palabras sean suficientes. Usa una tarjeta flotante cuando una vista previa pueda evitar ir a otra página. También debe funcionar con teclado y tacto. Abrir guía macOS Context MenumacOS Context Menu vs. Menú desplegable y menú contextual — Paquete de aprendizajeDropdown & Context Menu — Learning Bundle
Un menú contextual muestra acciones para el elemento que presionas. Un dropdown se abre desde un botón visible con un propósito claro.
Usa un menú contextual como un atajo adicional, no como la única vía. Usa un menú desplegable cuando la gente necesite ver dónde se abre el menú. Abrir guíaUn carrusel muestra diapositivas separadas con controles. Un marquee mantiene en movimiento una línea de contenido.
Use un carrusel cuando cada elemento necesite tiempo y controles. Use una marquesina solo para decoración sin importancia que pueda pausar y detenerse cuando se le pida. Abrir guíaUna lightbox es una ventana modal hecha para fotos o videos. Un modal normal tiene una opción que elegir, un formulario o una tarea corta.
Usa una caja de luz para ampliar imágenes o videos. Usa un modal cuando el trabajo principal sea actuar o decidir. Abrir guíaLa mampostería agrupa tarjetas de diferentes alturas en columnas. Una cuadrícula bento usa tamaños de tarjeta planeados para mostrar lo que más importa.
Usa mampostería para muchos elementos separados con diferentes alturas. Usa una cuadrícula estilo bento para un conjunto pequeño cuyo tamaño muestra importancia. Abrir guíaUna barra lateral se queda fija en la página. Un panel lateral se desliza por un momento y puede tapar o empujar la página.
Usa una barra lateral para herramientas o enlaces que las personas usan con frecuencia cuando hay espacio. Usa un cajón para tareas menos comunes o pantallas pequeñas, y haz que sea fácil de cerrar. Abrir guíaUn botón de tres líneas abre la navegación. Un botón de tres puntos abre más acciones para un elemento cercano.
Usa tres líneas para navegación oculta, principalmente en pantallas pequeñas. Usa tres puntos cuando las acciones de elementos adicionales no caben, y llama al botón “Más acciones.” Abrir guíaEl suavizado sigue una curva de tiempo establecida. Un resorte se mueve como un resorte real y se detiene por sí mismo.
Use suavizado para fundidos, cambios de color y pasos temporizados. Use un resorte para objetos que se mueven o siguen un arrastre. Abrir guíaUn stepper cambia un número en pasos fijos. Un slider elige un lugar a lo largo de un rango.
Usa un selector paso a paso para cambios pequeños y exactos. Usa un deslizador cuando la posición aproximada sea más importante que escribir un número exacto. Siempre muestra el valor y permite el uso del teclado. Abrir guíaUna sheet pertenece a una ventana y tiene una tarea corta. Una alerta muestra un mensaje corto o una elección que necesita atención ahora mismo.
Usa una hoja para configuraciones, guardado o un formulario corto vinculado a un documento. Usa una alerta para una advertencia, fallo o verificación en un paso. Abrir guía Estado Vacío, Error y Éxito — Paquete de AprendizajeEmpty, Error & Success State — Learning Bundle vs. EsqueletoSkeleton
Un estado vacío significa que no hay contenido. Un esqueleto significa que el contenido aún se está cargando y ya sabemos su forma.
Usa un estado vacío para explicar por qué no hay nada y qué hacer a continuación. Usa un esqueleto para una carga corta cuando conozcas el diseño. Abrir guíaUna barra de herramientas pone las acciones más habituales dentro de una ventana. La barra de menús guarda todos los comandos de la app arriba del todo en la pantalla.
Coloca las acciones comunes de documentos o selecciones en la barra de herramientas. Mantén todos los comandos, atajos de teclado y acciones menos comunes en la barra de menús. Abrir guía