@askrjs/ui/dialog

Dialogtype

Dialog: (props: DialogProps) => JSX.Element

Coordinates the Dialog trigger, portal, overlay, and content.

```tsx
<Dialog>
  <DialogTrigger>Open dialog</DialogTrigger>
  <DialogPortal>
    <DialogOverlay />
    <DialogContent>Confirm action</DialogContent>
  </DialogPortal>
</Dialog>
```

DialogClosetype

DialogClose: { (props: DialogCloseProps): JSX.Element; (props: DialogCloseAsChildProps): JSX.Element; }

Renders the dialog-close part of dialog. Supports polymorphic rendering via asChild.

DialogCloseAsChildPropstype

DialogCloseAsChildProps: ButtonLikeAsChildProps

Props for the asChild (polymorphic) rendering of Dialog Close.

asChild

asChild: true;

children

children: JSXElement;

disabled

disabled?: boolean | undefined;

onPress

onPress?: ((event: PressEvent) => void) | undefined;

ref

ref?: Ref<Element>;

type

type?: undefined;

DialogClosePropstype

DialogCloseProps: ButtonLikeProps<'button', HTMLButtonElement>

Props for Dialog Close.

asChild

asChild?: false | undefined;

children

children?: unknown;

disabled

disabled?: boolean | undefined;

onPress

onPress?: ((event: PressEvent) => void) | undefined;

ref

ref?: Ref<HTMLButtonElement>;

type

type?: "button" | "submit" | "reset" | undefined;

DialogContenttype

DialogContent: { (props: DialogContentProps): JSX.Element | null; (props: DialogContentAsChildProps): JSX.Element | null; }

Renders the dialog-content part of dialog. Supports polymorphic rendering via asChild.

DialogContentAsChildPropstype

DialogContentAsChildProps: BoxAsChildProps & DialogContentOwnProps

Props for the asChild (polymorphic) rendering of Dialog Content.

asChild

asChild: true;

children

children: JSXElement;

forceMount

forceMount?: boolean | undefined;

onDismiss

onDismiss?: (() => void) | undefined;

onEscapeKeyDown

onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;

onInteractOutside

onInteractOutside?: ((event: Event) => void) | undefined;

onPointerDownOutside

onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;

ref

ref?: Ref<Element>;

restoreFocus

Explicit focus target used when a controlled dialog has no persistent trigger.

role

role?: "dialog" | "alertdialog" | undefined;

DialogContentOwnPropstype

DialogContentOwnProps: {
  forceMount?: boolean;
  role?: 'dialog' | 'alertdialog';
  onEscapeKeyDown?: (event: KeyboardEvent) => void;
  onPointerDownOutside?: (event: PointerEvent) => void;
  onInteractOutside?: (event: Event) => void;
  onDismiss?: () => void;
  /** Explicit focus target used when a controlled dialog has no persistent trigger. */
  restoreFocus?: HTMLElement | null | (() => HTMLElement | null);
}

Own props for Dialog Content, before merging with native element attributes.

forceMount

forceMount?: boolean | undefined;

onDismiss

onDismiss?: (() => void) | undefined;

onEscapeKeyDown

onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;

onInteractOutside

onInteractOutside?: ((event: Event) => void) | undefined;

onPointerDownOutside

onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;

restoreFocus

Explicit focus target used when a controlled dialog has no persistent trigger.

role

role?: "dialog" | "alertdialog" | undefined;

DialogContentPropstype

DialogContentProps: BoxProps<'div', HTMLDivElement> & DialogContentOwnProps

Props for Dialog Content.

asChild

asChild?: false | undefined;

children

children?: unknown;

forceMount

forceMount?: boolean | undefined;

onDismiss

onDismiss?: (() => void) | undefined;

onEscapeKeyDown

onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;

onInteractOutside

onInteractOutside?: ((event: Event) => void) | undefined;

onPointerDownOutside

onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;

ref

ref?: Ref<HTMLDivElement>;

restoreFocus

Explicit focus target used when a controlled dialog has no persistent trigger.

role

role?: "dialog" | "alertdialog" | undefined;

DialogDescriptiontype

DialogDescription: { (props: DialogDescriptionProps): JSX.Element; (props: DialogDescriptionAsChildProps): JSX.Element; }

Renders the dialog-description part of dialog. Supports polymorphic rendering via asChild.

DialogDescriptionAsChildPropstype

DialogDescriptionAsChildProps: BoxAsChildProps

Props for the asChild (polymorphic) rendering of Dialog Description.

asChild

asChild: true;

children

children: JSXElement;

ref

ref?: Ref<Element>;

DialogDescriptionPropstype

DialogDescriptionProps: BoxProps<'p', HTMLParagraphElement>

Props for Dialog Description.

asChild

asChild?: false | undefined;

children

children?: unknown;

ref

ref?: Ref<HTMLParagraphElement>;

DialogOverlaytype

DialogOverlay: { (props: DialogOverlayProps): JSX.Element | null; (props: DialogOverlayAsChildProps): JSX.Element | null; }

Renders the dialog-overlay part of dialog. With @askrjs/themes/default, the overlay is fully styled out of the box with the shared backdrop token, blur, stacking, and fade animation. Standard Dialog and AlertDialog usage requires no additional overlay CSS; customize the theme tokens instead of applying a competing background class. Supports polymorphic rendering via asChild.

DialogOverlayAsChildPropstype

DialogOverlayAsChildProps: BoxAsChildProps & DialogOverlayOwnProps

Props for the asChild (polymorphic) rendering of Dialog Overlay.

asChild

asChild: true;

children

children: JSXElement;

forceMount

forceMount?: boolean | undefined;

ref

ref?: Ref<Element>;

DialogOverlayOwnPropstype

DialogOverlayOwnProps: {
  forceMount?: boolean;
}

Own props for Dialog Overlay, before merging with native element attributes.

forceMount

forceMount?: boolean | undefined;

DialogOverlayPropstype

DialogOverlayProps: BoxProps<'div', HTMLDivElement> & DialogOverlayOwnProps

Props for Dialog Overlay.

asChild

asChild?: false | undefined;

children

children?: unknown;

forceMount

forceMount?: boolean | undefined;

ref

ref?: Ref<HTMLDivElement>;

DialogOwnPropstype

DialogOwnProps: {
  children?: unknown;
  id?: string;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  modal?: boolean;
}

Own props for Dialog, before merging with native element attributes.

children

children?: unknown;

defaultOpen

defaultOpen?: boolean | undefined;

id

id?: string | undefined;

modal

modal?: boolean | undefined;

onOpenChange

onOpenChange?: ((open: boolean) => void) | undefined;

open

open?: boolean | undefined;

DialogPortaltype

DialogPortal: (props: DialogPortalProps) => JSX.Element | null

Renders a part of dialog.

DialogPortalPropstype

DialogPortalProps: {
  children?: unknown;
}

Props for Dialog Portal.

children

children?: unknown;

DialogPropstype

DialogProps: DialogOwnProps

Props for Dialog.

children

children?: unknown;

defaultOpen

defaultOpen?: boolean | undefined;

id

id?: string | undefined;

modal

modal?: boolean | undefined;

onOpenChange

onOpenChange?: ((open: boolean) => void) | undefined;

open

open?: boolean | undefined;

DialogTitletype

DialogTitle: { (props: DialogTitleProps): JSX.Element; (props: DialogTitleAsChildProps): JSX.Element; }

Renders the dialog-title part of dialog. Supports polymorphic rendering via asChild.

DialogTitleAsChildPropstype

DialogTitleAsChildProps: BoxAsChildProps

Props for the asChild (polymorphic) rendering of Dialog Title.

asChild

asChild: true;

children

children: JSXElement;

ref

ref?: Ref<Element>;

DialogTitlePropstype

DialogTitleProps: BoxProps<'h2', HTMLHeadingElement>

Props for Dialog Title.

asChild

asChild?: false | undefined;

children

children?: unknown;

ref

ref?: Ref<HTMLHeadingElement>;

DialogTriggertype

DialogTrigger: { (props: DialogTriggerProps): JSX.Element; (props: DialogTriggerAsChildProps): JSX.Element; }

Renders the dialog-trigger part of dialog. Supports polymorphic rendering via asChild.

DialogTriggerAsChildPropstype

DialogTriggerAsChildProps: ButtonLikeAsChildProps

Props for the asChild (polymorphic) rendering of Dialog Trigger.

asChild

asChild: true;

children

children: JSXElement;

disabled

disabled?: boolean | undefined;

onPress

onPress?: ((event: PressEvent) => void) | undefined;

ref

ref?: Ref<Element>;

type

type?: undefined;

DialogTriggerPropstype

DialogTriggerProps: ButtonLikeProps<'button', HTMLButtonElement>

Props for Dialog Trigger.

asChild

asChild?: false | undefined;

children

children?: unknown;

disabled

disabled?: boolean | undefined;

onPress

onPress?: ((event: PressEvent) => void) | undefined;

ref

ref?: Ref<HTMLButtonElement>;

type

type?: "button" | "submit" | "reset" | undefined;