Tailwind CSS Dialog - Props



Dialog Props

The following props are available for dialog component. These are the custom props that come with we've added for the dialog component and you can use all the other native props as well.

AttributeTypeDescriptionDefault
openbooleanOpen the dialogNo default value it's a required prop.
handlerfunctionControls open and close states for dialogNo default value it's a required prop.
sizeSizeChange dialog sizemd
dismissDismissChange backdrop dismiss listenersundefined
animateAnimateChange dialog animationundefined
classNamestringAdd custom className for dialog''
childrennodeAdd content for dialogNo default value it's a required prop.


For TypeScript Only

import type { DialogProps } from "@material-tailwind/react";

Dialog Header Props

The following props are available for dialog header component. These are the custom props that come with we've added for the dialog header component and you can use all the other native props as well.

AttributeTypeDescriptionDefault
classNamestringAdd custom className for dialog header''
childrennodeAdd content for dialog headerNo default value it's a required prop.


For TypeScript Only

import type { DialogHeaderProps } from "@material-tailwind/react";

Dialog Body Props

The following props are available for dialog body component. These are the custom props that come with we've added for the dialog body component and you can use all the other native props as well.

AttributeTypeDescriptionDefault
dividerbooleanAdd border top & bottom for dialog bodyfalse
classNamestringAdd custom className for dialog body''
childrennodeAdd content for dialog bodyNo default value it's a required prop.


For TypeScript Only

import type { DialogBodyProps } from "@material-tailwind/react";

Dialog Footer Props

The following props are available for dialog footer component. These are the custom props that come with we've added for the dialog footer component and you can use all the other native props as well.

AttributeTypeDescriptionDefault
classNamestringAdd custom className for dialog footer''
childrennodeAdd content for dialog footerNo default value it's a required prop.


For TypeScript Only

import type { DialogFooterProps } from "@material-tailwind/react";

Types - Size

type size = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";

Types - Dismiss

type dismissType = {
  enabled?: boolean;
  escapeKey?: boolean;
  referencePointerDown?: boolean;
  outsidePointerDown?: boolean;
  ancestorScroll?: boolean;
  bubbles?: boolean;
};

Types - Animate

type animate = {
  mount?: object;
  unmount?: object;
};

Related

Examples

Checkout different examples for dialog components.

Theme

Learn how to customize the theme and styles for dialog components.

Edit this page on Github