Modal
@stellaria/nebula-webModalPropsPreview
Props
22| Prop | Type | Default |
|---|---|---|
aria-label | string | — |
blurred | boolean | false |
bodyClassName | string | — |
centered | boolean | true |
children El cuerpo, dentro del panel que dibuja el propio modal. Sobra cuando se pasa `content`. | ReactNode | — |
className | string | — |
closeLabel | string | "Close" |
closeOnClickOutside | boolean | true |
closeOnEscape | boolean | true |
content El panel entero, traido por el consumidor. Con esto el modal **no dibuja panel**: se queda con lo que nadie quiere reescribir —el `<dialog>` nativo, el foco atrapado, el bloqueo del scroll, el velo desenfocado, la entrada y la salida animadas y el cierre por fuera— y suelta su superficie, su cabecera, su cuerpo y su pie. Lo que se pase ocupa ese sitio tal cual, sin envoltorio. Es para cuando la ventana ya tiene una forma propia en el producto —una `Card` con su anillo de degradado, por ejemplo— y meterla dentro del panel del modal dejaria una superficie sobre otra. Manda sobre `children`, `title`, `subtitle`, `footer`, `padding` y `withCloseButton`: con panel propio, esas piezas las pone quien lo trae. **Y el nombre accesible tambien**: sin `title` no hay de donde sacarlo, asi que pasa a hacer falta un `aria-label`. | ReactNode | — |
drawer | boolean | ModalSide | — |
footer | ReactNode | — |
fullScreen | boolean | false |
initialFocus Where focus lands when the modal opens (ADR-203). `"dialog"` focuses the `<dialog>` itself (`tabIndex -1`, the `useDialog` contract): the reader announces the title and Tab goes to the first control, with no focus ring on the close button. `"first"` keeps the native behaviour of `showModal()`, the first focusable inside — what a search box wants. A ref focuses that element, typically the first field of a form. | ModalInitialFocus | "dialog" |
onClose required | () => void | — |
opened required | boolean | — |
padding | "sm" | "md" | "lg" | "none" | "lg" |
radius | "sm" | "md" | "lg" | "none" | — |
size | SizeValue | "md" |
subtitle | ReactNode | — |
title | ReactNode | — |
withCloseButton | boolean | true |
Slot props
6Each one spreads over an inner element, so you can restyle a region without forking the component.
| Prop | Type | Default |
|---|---|---|
bodyProps The body. Its padding is governed by `padding`; the slot composes with it, it does not override it. | BoxSlotProps | — |
footerProps The footer, when there is a `footer`. | BoxSlotProps | — |
headerProps The header row: heading on the left, close button on the right. | BoxSlotProps | — |
headingProps Title and subtitle column, inside the header. | BoxSlotProps | — |
subtitleProps The subtitle, when there is one. | TextSlotProps | — |
titleProps The title. It spreads AFTER the aria props, so the consumer wins. | TextSlotProps | — |
Also accepts
On top of its own props, this component forwards these groups.