Askr documentation
Generated API snapshot

@askrjs/ui/dialog

Exports from the declarations published in @askrjs/ui. Signatures reflect the published artifact.

Exports

This entrypoint publishes 27 exports. Use the anchored symbol rows for direct links. Type-only exports are labeled separately from runtime values.

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>
```

DIALOG_A11Y_CONTRACTtype

DIALOG_A11Y_CONTRACT: { readonly CONTENT_ROLE: "dialog"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; }; readonly MODAL_ATTRIBUTE: "aria-modal"; readonly LABELLED_BY_ATTRIBUTE: "aria-labelledby"; readonly DESCRIBED_BY_ATTRIBUTE: "aria-describedby"; readonly TRIGGER_ATTRIBUTES: { readonly expanded: "aria-expanded"; readonly controls: "aria-controls"; }; }

Dialog accessibility contract.

DialogA11yContracttype

DialogA11yContract: typeof DIALOG_A11Y_CONTRACT

Type of the Dialog A11y Contract object.

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>;
role
role?: "alertdialog" | "dialog" | undefined;

DialogContentOwnPropstype

DialogContentOwnProps: {
  forceMount?: boolean;
  role?: 'dialog' | 'alertdialog';
  onEscapeKeyDown?: (event: KeyboardEvent) => void;
  onPointerDownOutside?: (event: PointerEvent) => void;
  onInteractOutside?: (event: Event) => void;
  onDismiss?: () => void;
}

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;
role
role?: "alertdialog" | "dialog" | 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>;
role
role?: "alertdialog" | "dialog" | 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;