Drawer

API

Generated CoreAI prop summaries, not replacement type declarations. Most native DOM/event and ARIA props are omitted. ? means optional; JSDoc shows defaults, deprecations, and conditional requirements. Defaults assume the standard CoreAI provider.

Drawer API

Drawer contains supplementary content and are used for complex creation, edit, or management experiences.

interface DrawerProps {
  as?: "aside" | "div";

  /**
   * Dimmed background of dialog.
   * The default backdrop is rendered as a `<div>` with styling.
   * This slot expects a `<div>` element which will replace the default backdrop.
   * The backdrop should have `aria-hidden="true"`.
   *
   * Accepts an `appearance` prop to control backdrop visibility:
   * - `'dimmed'`: Always shows a dimmed backdrop, regardless of nesting.
   * - `'transparent'`: Always shows a transparent backdrop.
   */
  backdrop?: WithSlotShorthandValue<{ as?: "div"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, "children"> & { children?: any; } & { appearance?: "transparent" | "dimmed" | undefined; }> | null | undefined;

  /**
   * For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).
   */
  backdropMotion?: PresenceMotionSlotProps<FadeParams> | (Pick<PresenceComponentProps, "imperativeRef" | "onMotionFinish" | "onMotionStart"> & Partial<Required<Pick<DrawerBaseProps, "size">>> & { as?: JSXIntrinsicElementKeys; children?: SlotRenderFunction<PresenceMotionSlotRenderProps & Required<Pick<DrawerBaseProps, "size">> & { children: JSXElement; }>; } & Partial<FadeParams> & { as?: JSXIntrinsicElementKeys | undefined; children?: SlotRenderFunction<PresenceMotionSlotRenderProps & PresenceDuration & PresenceEasing & PresenceDelay & { outOpacity?: number | undefined; inOpacity?: number | undefined; } & { children: JSXElement; }> | undefined; }) | (Pick<PresenceComponentProps, "imperativeRef" | "onMotionFinish" | "onMotionStart"> & Partial<FadeParams> & { as?: JSXIntrinsicElementKeys | undefined; children?: SlotRenderFunction<PresenceMotionSlotRenderProps & PresenceDuration & PresenceEasing & PresenceDelay & { outOpacity?: number | undefined; inOpacity?: number | undefined; } & { children: JSXElement; }> | undefined; } & Partial<Required<Pick<DrawerBaseProps, "size">>> & { as?: JSXIntrinsicElementKeys | undefined; children?: SlotRenderFunction<PresenceMotionSlotRenderProps & Required<Pick<DrawerBaseProps, "size">> & { children: JSXElement; }> | undefined; }) | null | undefined;

  children?: any;

  className?: string;

  /**
   * @deprecated OverlayDrawer can work only as a controlled component
   * and does not support uncontrolled mode i.e. defaultOpen prop
   */
  defaultOpen?: boolean;

  /**
   * Enables standard behavior according to the [HTML dialog spec](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)
   * where the focus trap involves setting outside elements inert.
   * @default false
   */
  inertTrapFocus?: boolean;

  /**
   * Dialog variations.
   *
   * `modal`: When this type of dialog is open, the rest of the page is dimmed out and cannot be interacted with.
   * The tab sequence is kept within the dialog and moving the focus outside
   * the dialog will imply closing it. This is the default type of the component.
   *
   * `non-modal`: When a non-modal dialog is open, the rest of the page is not dimmed out
   * and users can interact with the rest of the page.
   * This also implies that the tab focus can move outside the dialog when it reaches the last focusable element.
   *
   * `alert`: is a special type of modal dialogs that interrupts the user's workflow
   * to communicate an important message or ask for a decision.
   * Unlike a typical modal dialog, the user must take an action through the options given to dismiss the dialog,
   * and it cannot be dismissed through the dimmed background.
   * @default modal
   */
  modalType?: "alert" | "modal" | "non-modal";

  /**
   * Where the portal children are mounted on DOM
   * @default a new element on document.body without any styling
   */
  mountNode?: HTMLElement | { element?: HTMLElement | null; className?: string; } | null | undefined;

  /**
   * Callback fired when the component changes value from open state.
   */
  onOpenChange?: DialogOpenChangeEventHandler;

  /**
   * Controls the open state of the Drawer
   * @default false
   */
  open?: boolean;

  /**
   * Position of the drawer.
   *
   * Note: 'bottom' does not supports size, but it supports customized height.
   * @default 'start'
   */
  position?: "start" | "end" | "bottom";

  ref?: Ref<HTMLElement> | ((((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement>) & (((instance: HTMLElement | null) => void) | RefObject<HTMLElement>));

  /**
   * Whether the drawer has a separator line.
   * @default false
   */
  separator?: boolean;

  /**
   * Size of the drawer.
   *
   * - 'small' - Drawer is 320px wide.
   * - 'medium' - Drawer is 592px wide.
   * - 'large' - Drawer is 940px wide.
   * - 'full' - Drawer is 100vw wide.
   * @default 'small'
   */
  size?: "small" | "medium" | "large" | "full";

  style?: CSSProperties;

  /**
   * For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).
   */
  surfaceMotion?: PresenceMotionSlotProps<Required<Pick<DrawerBaseProps, "size" | "position"> & Pick<ProviderContextValue_unstable, "dir">>> | SurfaceMotionSlotProps | null;

  /**
   * Type of the drawer.
   *
   * - 'overlay' - Drawer is hidden by default and can be opened by clicking on the trigger.
   * - 'inline' - Drawer is stacked with the content
   * @default overlay
   */
  type?: "inline" | "overlay";

  /**
   * Decides whether the drawer should be removed from the DOM tree when it is closed.
   * This can be useful when dealing with components that may contain state that should not
   * be reset when the drawer is closed.
   * @default true
   */
  unmountOnClose?: boolean;
}

DrawerBody API

DrawerBody provides with a container for the main content of a Drawer.

interface DrawerBodyProps {
  as?: "div";

  children?: any;

  className?: string;

  ref?: Ref<HTMLDivElement>;

  style?: CSSProperties;
}

DrawerFooter API

DrawerFooter provides a structured footer for the drawer component.

interface DrawerFooterProps {
  as?: "footer";

  children?: any;

  className?: string;

  ref?: Ref<HTMLElement>;

  style?: CSSProperties;
}

DrawerHeader API

DrawerHeader provides a structured header for the drawer component.

interface DrawerHeaderProps {
  as?: "header";

  children?: any;

  className?: string;

  ref?: Ref<HTMLElement>;

  style?: CSSProperties;
}

DrawerHeaderNavigation API

DrawerHeaderNavigation provides a header navigation area for the Drawer.

interface DrawerHeaderNavigationProps {
  as?: "nav";

  children?: any;

  className?: string;

  ref?: Ref<HTMLElement>;

  style?: CSSProperties;
}

DrawerHeaderTitle API

DrawerHeader provides a structured header for the drawer component.

interface DrawerHeaderTitleProps {
  /**
   * Action slot for the close button
   */
  action?: WithSlotShorthandValue<{ as?: "div"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  as?: "div";

  children?: any;

  className?: string;

  /**
   * By default this is a h2, but can be any heading or div.
   * If `div` is provided do not forget to also provide proper `role="heading"` and `aria-level` attributes
   */
  heading?: ({ as: "h1"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & { ref?: ((instance: HTMLHeadingElement | null) => void) | RefObject<HTMLHeadingElement> | null; }, "children"> & { children?: any; }) | ({ as: "h3"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & { ref?: ((instance: HTMLHeadingElement | null) => void) | RefObject<HTMLHeadingElement> | null; }, "children"> & { children?: any; }) | ({ as: "h4"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & { ref?: ((instance: HTMLHeadingElement | null) => void) | RefObject<HTMLHeadingElement> | null | undefined; }, "children"> & { children?: any; }) | ({ as: "h5"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & { ref?: ((instance: HTMLHeadingElement | null) => void) | RefObject<HTMLHeadingElement> | null | undefined; }, "children"> & { children?: any; }) | ({ as: "h6"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & { ref?: ((instance: HTMLHeadingElement | null) => void) | RefObject<HTMLHeadingElement> | null | undefined; }, "children"> & { children?: any; }) | ({ as: "div"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined; }, "children"> & { children?: any; }) | WithSlotShorthandValue<{ as?: "h2" | undefined; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & { ref?: ((instance: HTMLHeadingElement | null) => void) | RefObject<HTMLHeadingElement> | null | undefined; }, "children"> & { children?: any; }> | null | undefined;

  ref?: Ref<HTMLDivElement>;

  style?: CSSProperties;
}

InlineDrawer API

InlineDrawer is often used for navigation that is not dismissible. As it is on the same level as the main surface, users can still interact with other UI elements.

interface InlineDrawerProps {
  as?: "aside" | "div";

  children?: any;

  className?: string;

  /**
   * Controls the open state of the Drawer
   * @default false
   */
  open?: boolean;

  /**
   * Position of the drawer.
   *
   * Note: 'bottom' does not supports size, but it supports customized height.
   * @default 'start'
   */
  position?: "start" | "end" | "bottom";

  ref?: Ref<HTMLElement>;

  /**
   * Whether the drawer has a separator line.
   * @default false
   */
  separator?: boolean;

  /**
   * Size of the drawer.
   *
   * - 'small' - Drawer is 320px wide.
   * - 'medium' - Drawer is 592px wide.
   * - 'large' - Drawer is 940px wide.
   * - 'full' - Drawer is 100vw wide.
   * @default 'small'
   */
  size?: "small" | "medium" | "large" | "full";

  style?: CSSProperties;

  surfaceMotion?: SurfaceMotionSlotProps | null;

  /**
   * Decides whether the drawer should be removed from the DOM tree when it is closed.
   * This can be useful when dealing with components that may contain state that should not
   * be reset when the drawer is closed.
   * @default true
   */
  unmountOnClose?: boolean;
}

OverlayDrawer API

OverlayDrawer contains supplementary content and are used for complex creation, edit, or management experiences.

interface OverlayDrawerProps {
  as?: "aside" | "div";

  /**
   * Dimmed background of dialog.
   * The default backdrop is rendered as a `<div>` with styling.
   * This slot expects a `<div>` element which will replace the default backdrop.
   * The backdrop should have `aria-hidden="true"`.
   *
   * Accepts an `appearance` prop to control backdrop visibility:
   * - `'dimmed'`: Always shows a dimmed backdrop, regardless of nesting.
   * - `'transparent'`: Always shows a transparent backdrop.
   */
  backdrop?: WithSlotShorthandValue<{ as?: "div"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, "children"> & { children?: any; } & { appearance?: "transparent" | "dimmed" | undefined; }> | null | undefined;

  /**
   * For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).
   */
  backdropMotion?: (Pick<PresenceComponentProps, "imperativeRef" | "onMotionFinish" | "onMotionStart"> & Partial<Required<Pick<DrawerBaseProps, "size">>> & { as?: JSXIntrinsicElementKeys; children?: SlotRenderFunction<PresenceMotionSlotRenderProps & Required<Pick<DrawerBaseProps, "size">> & { children: JSXElement; }>; } & Partial<FadeParams> & { as?: JSXIntrinsicElementKeys | undefined; children?: SlotRenderFunction<PresenceMotionSlotRenderProps & PresenceDuration & PresenceEasing & PresenceDelay & { outOpacity?: number | undefined; inOpacity?: number | undefined; } & { children: JSXElement; }> | undefined; }) | null | undefined;

  children?: any;

  className?: string;

  /**
   * @deprecated OverlayDrawer can work only as a controlled component
   * and does not support uncontrolled mode i.e. defaultOpen prop
   */
  defaultOpen?: boolean;

  /**
   * Enables standard behavior according to the [HTML dialog spec](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)
   * where the focus trap involves setting outside elements inert.
   * @default false
   */
  inertTrapFocus?: boolean;

  /**
   * Dialog variations.
   *
   * `modal`: When this type of dialog is open, the rest of the page is dimmed out and cannot be interacted with.
   * The tab sequence is kept within the dialog and moving the focus outside
   * the dialog will imply closing it. This is the default type of the component.
   *
   * `non-modal`: When a non-modal dialog is open, the rest of the page is not dimmed out
   * and users can interact with the rest of the page.
   * This also implies that the tab focus can move outside the dialog when it reaches the last focusable element.
   *
   * `alert`: is a special type of modal dialogs that interrupts the user's workflow
   * to communicate an important message or ask for a decision.
   * Unlike a typical modal dialog, the user must take an action through the options given to dismiss the dialog,
   * and it cannot be dismissed through the dimmed background.
   * @default modal
   */
  modalType?: "alert" | "modal" | "non-modal";

  /**
   * Where the portal children are mounted on DOM
   * @default a new element on document.body without any styling
   */
  mountNode?: HTMLElement | { element?: HTMLElement | null; className?: string; } | null | undefined;

  /**
   * Callback fired when the component changes value from open state.
   */
  onOpenChange?: DialogOpenChangeEventHandler;

  /**
   * Controls the open state of the Drawer
   * @default false
   */
  open?: boolean;

  /**
   * Position of the drawer.
   *
   * Note: 'bottom' does not supports size, but it supports customized height.
   * @default 'start'
   */
  position?: "start" | "end" | "bottom";

  ref?: Ref<HTMLElement>;

  /**
   * Size of the drawer.
   *
   * - 'small' - Drawer is 320px wide.
   * - 'medium' - Drawer is 592px wide.
   * - 'large' - Drawer is 940px wide.
   * - 'full' - Drawer is 100vw wide.
   * @default 'small'
   */
  size?: "small" | "medium" | "large" | "full";

  style?: CSSProperties;

  /**
   * For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).
   */
  surfaceMotion?: PresenceMotionSlotProps<Required<Pick<DrawerBaseProps, "size" | "position"> & Pick<ProviderContextValue_unstable, "dir">>> | null;

  /**
   * Decides whether the drawer should be removed from the DOM tree when it is closed.
   * This can be useful when dealing with components that may contain state that should not
   * be reset when the drawer is closed.
   * @default true
   */
  unmountOnClose?: boolean;
}