Overlay

Los overlays muestran un panel sobre la vista actual sin sacar al usuario de su contexto. Elige desde dónde entra según la tarea: confirmar, elegir o revisar un detalle.

Agendar mantención

Toyota Yaris

JTRX-12

Av. Apoquindo 4501

Las Condes

Jueves 22 de octubre

Elige un horario

Elige un horario

Jueves 22 de octubre

Anatomía

Un fondo que cubre la pantalla y un panel encima con el contenido. En el bottom sheet, la manilla indica que se puede arrastrar para cerrar.

  1. Fondo
  2. Panel
  3. Manilla opcional
  4. Contenido

Variantes

Los tres comparten la misma base: un panel sobre un fondo que se cierra con Esc o al tocar afuera. Cambia desde dónde entra y cuánto espacio ocupa.

ModalOverlayCentrado. Para confirmar una acción o mostrar un mensaje corto.
BottomSheetOverlaySube desde abajo. Para elegir opciones sin perder el contexto en mobile.
SideDrawerOverlayEntra por un costado. Para detalles largos en desktop.

Opciones

backdrop dimEl fondo se oscurece y enfoca la atención en el panel. Es el default.
backdrop transparentLa vista de atrás sigue visible, útil cuando el usuario necesita verla.
dragToCloseSuma una manilla y permite cerrar el bottom sheet arrastrando hacia abajo.

Uso

Sí
Modal centrado para confirmar una acción puntual, como cancelar un servicio.
No
Un drawer lateral para una pregunta de sí o no deja demasiado espacio vacío.
Sí
Bottom sheet en mobile para elegir entre pocas opciones, como un horario.
No
Fondo transparent cuando la vista de atrás no aporta. Compite con el panel.

Código

import { BottomSheetOverlay } from '@carvuk/design-system/components/overlay';

<BottomSheetOverlay open={open} onOpenChange={setOpen} dragToClose>
  <TimePicker />
</BottomSheetOverlay>