Overlays · Onaris Design System

Modal

Diálogo centrado con overlay que bloquea la interacción de fondo. Para acciones que requieren foco total del usuario: confirmaciones, formularios cortos, decisiones críticas. Tres composiciones: estándar, confirmación (con icono semántico) y formulario.

Confirmación destructivasize sm + icono danger

Viewport

Formulariosize md + footer between

Viewport

<Modal open={open} onClose={close} size="sm">
  <Modal.Header>Eliminar artículo</Modal.Header>
  <Modal.Body icon={<IconTrash />} tone="danger">
    ¿Seguro que quieres eliminar este artículo?
  </Modal.Body>
  <Modal.Footer>
    <Button variant="secondary">Cancelar</Button>
    <Button variant="danger">Eliminar</Button>
  </Modal.Footer>
</Modal>

Prop	Tipo	Default	Descripción
open	boolean	false	Controla la visibilidad.
onClose	() => void	—	Se invoca al cerrar (Esc, overlay, botón).
size	'sm' \| 'md' \| 'lg'	'md'	380 / 480 / 720 px.
closeOnOverlay	boolean	true	Cerrar al clicar el fondo.
closeOnEsc	boolean	true	Cerrar con tecla Escape.
initialFocus	RefObject	—	Elemento que recibe foco al abrir.

Drawer

Panel lateral deslizante. Ideal para edición contextual sin perder el contexto de la lista (configurar un artículo, filtros avanzados, detalle de pedido). Posiciones: right (default), left, bottom.

Panel derecho de edición

Viewport

Nombre

SKU

Precio

€

Stock

Estado

Publicado

<Drawer open={open} onClose={close} position="right" size="md">
  <Drawer.Header kicker="Editar artículo">
    Camiseta algodón orgánico
  </Drawer.Header>
  <Drawer.Body>{/* campos */}</Drawer.Body>
  <Drawer.Footer>
    <Button variant="secondary">Cancelar</Button>
    <Button>Guardar</Button>
  </Drawer.Footer>
</Drawer>

Prop	Tipo	Default	Descripción
open	boolean	false	Controla la visibilidad.
onClose	() => void	—	Handler de cierre.
position	'right' \| 'left' \| 'bottom'	'right'	Borde de aparición.
size	'sm' \| 'md' \| 'lg'	'md'	320 / 380 / 480 px (ancho).
closeOnOverlay	boolean	true	Cerrar al clicar el fondo.

Tooltip

Etiqueta contextual que aparece al hover/focus. Solo para texto breve aclaratorio (nunca interactivo — para contenido con acciones usar Popover). Aparece tras 400ms de delay.

Simple · 4 posiciones

Rich (con título)

<Tooltip content="Duplicar artículo">
  <IconButton aria-label="Duplicar"><IconDuplicar /></IconButton>
</Tooltip>

<Tooltip title="SKU sincronizado" content="Hace 3 min" placement="top">
  <Badge variant="success">Sync</Badge>
</Tooltip>

Prop	Tipo	Default	Descripción
content	string \| ReactNode	—	Texto o cuerpo del tooltip.
title	string	—	Título (activa variante rich).
placement	'top' \| 'bottom' \| 'left' \| 'right'	'top'	Posición relativa al trigger.
delay	number	400	Ms antes de mostrarse.
children	ReactElement	—	Elemento disparador.

Popover & Menu

Panel flotante anclado a un disparador, con contenido interactivo (a diferencia del Tooltip). Menu es la variante especializada en listas de acciones: items, atajos, separadores y acciones destructivas.

Popover genérico

Menu de accionescon secciones, atajos y acción destructiva

// Popover
<Popover trigger={<Button>Precio</Button>} placement="bottom-start">
  {/* contenido interactivo */}
</Popover>

// Menu
<Menu trigger={<IconButton aria-label="Opciones">…</IconButton>}>
  <Menu.Label>Artículo</Menu.Label>
  <Menu.Item icon={<IconLapiz />} shortcut="E">Editar</Menu.Item>
  <Menu.Divider />
  <Menu.Item danger icon={<IconEliminar />}>Eliminar</Menu.Item>
</Menu>

Prop	Tipo	Default	Descripción
Popover / Menu
trigger	ReactElement	—	Elemento que abre el panel.
placement	'bottom-start' \| 'bottom-end' \| 'top-start' \| …	'bottom-start'	Anclaje respecto al trigger.
open	boolean	—	Modo controlado (opcional).
onOpenChange	(open) => void	—	Cambio de estado.
Menu.Item
icon	ReactNode	—	Icono a la izquierda.
shortcut	string	—	Atajo de teclado mostrado a la derecha.
danger	boolean	false	Estilo destructivo (rojo).
onSelect	() => void	—	Handler al elegir el item.