Skip to content

components/dialog

@fungi.computer/caps


@fungi.computer/caps / components/dialog

DialogChangeDetails = BaseDialog.Root.ChangeEventDetails

Details supplied to a Dialog open-change callback.


DialogChangeReason = BaseDialog.Root.ChangeEventReason

Supported DialogChangeReason values.


DialogInteractionOwner = "host" | "local"

Supported DialogInteractionOwner values.


DialogProps<Payload> > = BaseDialog.Root.Props<Payload> > & object

Props accepted by Dialog.

optional interactionOwner?: DialogInteractionOwner

Payload = unknown


DialogContentProps = BaseDialog.Popup.Props & Pick<BaseDialog.Portal.Props, "container" | "keepMounted">>

Props accepted by DialogContent.

const DialogTrigger: ForwardRefExoticComponent<Omit<Props<unknown>>, "ref"> > & RefAttributes<HTMLButtonElement>>>>

The trigger control for a Dialog.


const DialogPortal: ForwardRefExoticComponent<Omit<DialogPortalProps, "ref"> > & RefAttributes<HTMLDivElement>> >> = BaseDialog.Portal

The native portal, including caller-selected container and mount lifetime.


const DialogBackdrop: ForwardRefExoticComponent<Omit<DialogBackdropProps, "ref"> > & RefAttributes<HTMLDivElement>>>>

The styled backdrop for a composed Dialog.


const DialogPopup: ForwardRefExoticComponent<Omit<DialogPopupProps, "ref"> > & RefAttributes<HTMLDivElement>>>>

The styled popup with Base UI composition and caller-controlled focus targets.


const DialogContent: ForwardRefExoticComponent<Omit<DialogContentProps, "ref"> > & RefAttributes<HTMLDivElement>>>>

The default portal, backdrop and popup composition for a Dialog. Keeps child state across closes. Like Base UI, only full modal mode has a backdrop.


const DialogTitle: ForwardRefExoticComponent<Omit<DialogTitleProps, "ref"> > & RefAttributes<HTMLHeadingElement>>>>

The accessible title for a Dialog.


const DialogDescription: ForwardRefExoticComponent<Omit<DialogDescriptionProps, "ref"> > & RefAttributes<HTMLParagraphElement>>>>

The accessible description for a Dialog.


const DialogClose: ForwardRefExoticComponent<Omit<DialogCloseProps, "ref"> > & RefAttributes<HTMLButtonElement>>>>

A control that requests a Dialog to close.

Dialog<Payload>>(__namedParameters): Element

A dialog controller with explicit controlled or uncontrolled open state.

Payload = unknown

DialogProps<Payload>

Element


DialogFooter(__namedParameters): Element

A footer layout for caller-provided Dialog actions.

HTMLAttributes<HTMLDivElement>

Element


DialogHeader(__namedParameters): Element

A header layout for caller-provided Dialog content.

HTMLAttributes<HTMLDivElement>

Element