Dialog
A modal dialog component for displaying important content that requires user interaction.
Usage
The Dialog component is used to display content in a modal overlay that requires user attention. It can be used as a modal or popover.
Modal Dialog Example
Popover Dialog Example
Size Examples
Fullscreen Dialog
Props
| Prop | Type | Default |
|---|---|---|
reversed? | ConditionalValue<ConditionalAtomicStyles<{ readonly alignItems: readonly ["flex-start", "flex-end", "center", "stretch", "baseline"]; readonly display: readonly ["block", "none", "inline-flex", "inline", "flex"]; readonly flexDirection: readonly ["row", "column", "row-reverse", "column-reverse"]; readonly flexWrap: readonly ["wrap", "nowrap"]; readonly gap: MapLeafNodes<Record<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "2xs" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "3xs", string>, `var(--${string})`>; readonly justifyContent: readonly ["flex-start", "flex-end", "center", "stretch", "baseline", "space-around", "space-between", "space-evenly"]; }, { readonly xs: { '@media': string; }; readonly sm: { '@media': string; }; readonly md: { '@media': string; }; readonly lg: { '@media': string; }; readonly xl: { '@media': string; }; readonly default: {}; }, "default">, boolean> | - |
align? | ConditionalValue<ConditionalAtomicStyles<{ readonly alignItems: readonly ["flex-start", "flex-end", "center", "stretch", "baseline"]; readonly display: readonly ["block", "none", "inline-flex", "inline", "flex"]; readonly flexDirection: readonly ["row", "column", "row-reverse", "column-reverse"]; readonly flexWrap: readonly ["wrap", "nowrap"]; readonly gap: MapLeafNodes<Record<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "2xs" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "3xs", string>, `var(--${string})`>; readonly justifyContent: readonly ["flex-start", "flex-end", "center", "stretch", "baseline", "space-around", "space-between", "space-evenly"]; }, { readonly xs: { '@media': string; }; readonly sm: { '@media': string; }; readonly md: { '@media': string; }; readonly lg: { '@media': string; }; readonly xl: { '@media': string; }; readonly default: {}; }, "default">, "stretch" | "center" | "end" | "start" | "baseline"> | - |
bleedY? | boolean | true |
bleedX? | boolean | false |
variant? | "transparent" | "solid" | "outlined" | "raised" | "floating" | "subtle" | "soft" | "muted" | "translucent" | - |
shadow? | "sm" | "md" | "lg" | "none" | - |
borderStrength? | "medium" | "strong" | "weak" | - |
fullscreen? | boolean | false |
paddingY? | ConditionalStyle<Values<MapLeafNodes<Record<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "2xs" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "3xs", string>, `var(--${string})`>, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
paddingX? | ConditionalStyle<Values<MapLeafNodes<Record<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "2xs" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "3xs", string>, `var(--${string})`>, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
marginY? | ConditionalStyle<Values<{ auto: string; "-xs": string; "-sm": string; "-md": string; "-lg": string; "-xl": string; "-2xs": string; "-2xl": string; "-3xl": string; "-4xl": string; "-5xl": string; "-6xl": string; "-3xs": string; xs: `var(--${string})`; sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; none: `var(--${string})`; "2xs": `var(--${string})`; "2xl": `var(--${string})`; "3xl": `var(--${string})`; "4xl": `var(--${string})`; "5xl": `var(--${string})`; "6xl": `var(--${string})`; "3xs": `var(--${string})`; }, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
marginX? | ConditionalStyle<Values<{ auto: string; "-xs": string; "-sm": string; "-md": string; "-lg": string; "-xl": string; "-2xs": string; "-2xl": string; "-3xl": string; "-4xl": string; "-5xl": string; "-6xl": string; "-3xs": string; xs: `var(--${string})`; sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; none: `var(--${string})`; "2xs": `var(--${string})`; "2xl": `var(--${string})`; "3xl": `var(--${string})`; "4xl": `var(--${string})`; "5xl": `var(--${string})`; "6xl": `var(--${string})`; "3xs": `var(--${string})`; }, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
radius? | "xs" | "sm" | "md" | "lg" | "xl" | "none" | "round" | "2xs" | "2xl" | "3xl" | "4xl" | "3xs" | - |
justify? | ConditionalValue<ConditionalAtomicStyles<{ readonly alignItems: readonly ["flex-start", "flex-end", "center", "stretch", "baseline"]; readonly display: readonly ["block", "none", "inline-flex", "inline", "flex"]; readonly flexDirection: readonly ["row", "column", "row-reverse", "column-reverse"]; readonly flexWrap: readonly ["wrap", "nowrap"]; readonly gap: MapLeafNodes<Record<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "2xs" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "3xs", string>, `var(--${string})`>; readonly justifyContent: readonly ["flex-start", "flex-end", "center", "stretch", "baseline", "space-around", "space-between", "space-evenly"]; }, { readonly xs: { '@media': string; }; readonly sm: { '@media': string; }; readonly md: { '@media': string; }; readonly lg: { '@media': string; }; readonly xl: { '@media': string; }; readonly default: {}; }, "default">, "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | "baseline"> | - |
wrap? | ConditionalValue<ConditionalAtomicStyles<{ readonly alignItems: readonly ["flex-start", "flex-end", "center", "stretch", "baseline"]; readonly display: readonly ["block", "none", "inline-flex", "inline", "flex"]; readonly flexDirection: readonly ["row", "column", "row-reverse", "column-reverse"]; readonly flexWrap: readonly ["wrap", "nowrap"]; readonly gap: MapLeafNodes<Record<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "2xs" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "3xs", string>, `var(--${string})`>; readonly justifyContent: readonly ["flex-start", "flex-end", "center", "stretch", "baseline", "space-around", "space-between", "space-evenly"]; }, { readonly xs: { '@media': string; }; readonly sm: { '@media': string; }; readonly md: { '@media': string; }; readonly lg: { '@media': string; }; readonly xl: { '@media': string; }; readonly default: {}; }, "default">, boolean> | - |
inline? | ConditionalValue<ConditionalAtomicStyles<{ readonly alignItems: readonly ["flex-start", "flex-end", "center", "stretch", "baseline"]; readonly display: readonly ["block", "none", "inline-flex", "inline", "flex"]; readonly flexDirection: readonly ["row", "column", "row-reverse", "column-reverse"]; readonly flexWrap: readonly ["wrap", "nowrap"]; readonly gap: MapLeafNodes<Record<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "2xs" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "3xs", string>, `var(--${string})`>; readonly justifyContent: readonly ["flex-start", "flex-end", "center", "stretch", "baseline", "space-around", "space-between", "space-evenly"]; }, { readonly xs: { '@media': string; }; readonly sm: { '@media': string; }; readonly md: { '@media': string; }; readonly lg: { '@media': string; }; readonly xl: { '@media': string; }; readonly default: {}; }, "default">, boolean> | - |
layout? | LayoutOptions | - |
padding? | ConditionalStyle<Values<MapLeafNodes<Record<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "2xs" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "3xs", string>, `var(--${string})`>, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
margin? | ConditionalStyle<Values<{ auto: string; "-xs": string; "-sm": string; "-md": string; "-lg": string; "-xl": string; "-2xs": string; "-2xl": string; "-3xl": string; "-4xl": string; "-5xl": string; "-6xl": string; "-3xs": string; xs: `var(--${string})`; sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; none: `var(--${string})`; "2xs": `var(--${string})`; "2xl": `var(--${string})`; "3xl": `var(--${string})`; "4xl": `var(--${string})`; "5xl": `var(--${string})`; "6xl": `var(--${string})`; "3xs": `var(--${string})`; }, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
gap? | ConditionalStyle<Values<MapLeafNodes<Record<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "2xs" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "3xs", string>, `var(--${string})`>, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
borderWidth? | "none" | "thick" | "regular" | - |
borderColor? | "blue" | "cyan" | "fuchsia" | "green" | "indigo" | "lime" | "orange" | "pink" | "purple" | "red" | "teal" | "violet" | "yellow" | "amber" | "neutral" | - |
width? | ConditionalStyle<Values<{ none: string; 'fit-content': string; 'min-content': string; 'max-content': string; '1/12': string; '1/6': string; '1/4': string; '1/3': string; '5/12': string; '1/2': string; '7/12': string; '2/3': string; '3/4': string; '5/6': string; '11/12': string; full: string; device: string; xs: `var(--${string})`; sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; "2xs": `var(--${string})`; "2xl": `var(--${string})`; "3xl": `var(--${string})`; "4xl": `var(--${string})`; "5xl": `var(--${string})`; "6xl": `var(--${string})`; "3xs": `var(--${string})`; "6xs": `var(--${string})`; "5xs": `var(--${string})`; "4xs": `var(--${string})`; }, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
paddingTop? | ConditionalStyle<Values<MapLeafNodes<Record<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "2xs" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "3xs", string>, `var(--${string})`>, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
paddingRight? | ConditionalStyle<Values<MapLeafNodes<Record<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "2xs" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "3xs", string>, `var(--${string})`>, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
paddingLeft? | ConditionalStyle<Values<MapLeafNodes<Record<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "2xs" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "3xs", string>, `var(--${string})`>, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
paddingBottom? | ConditionalStyle<Values<MapLeafNodes<Record<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "2xs" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "3xs", string>, `var(--${string})`>, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
minWidth? | ConditionalStyle<Values<{ none: string; 'fit-content': string; 'min-content': string; 'max-content': string; '1/12': string; '1/6': string; '1/4': string; '1/3': string; '5/12': string; '1/2': string; '7/12': string; '2/3': string; '3/4': string; '5/6': string; '11/12': string; full: string; device: string; xs: `var(--${string})`; sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; "2xs": `var(--${string})`; "2xl": `var(--${string})`; "3xl": `var(--${string})`; "4xl": `var(--${string})`; "5xl": `var(--${string})`; "6xl": `var(--${string})`; "3xs": `var(--${string})`; "6xs": `var(--${string})`; "5xs": `var(--${string})`; "4xs": `var(--${string})`; }, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
minHeight? | ConditionalStyle<Values<MapLeafNodes<Record<"xs" | "sm" | "md" | "lg" | "xl" | "2xs" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "3xs" | "6xs" | "5xs" | "4xs", string>, `var(--${string})`>, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
maxWidth? | ConditionalStyle<Values<{ none: string; 'fit-content': string; 'min-content': string; 'max-content': string; '1/12': string; '1/6': string; '1/4': string; '1/3': string; '5/12': string; '1/2': string; '7/12': string; '2/3': string; '3/4': string; '5/6': string; '11/12': string; full: string; device: string; xs: `var(--${string})`; sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; "2xs": `var(--${string})`; "2xl": `var(--${string})`; "3xl": `var(--${string})`; "4xl": `var(--${string})`; "5xl": `var(--${string})`; "6xl": `var(--${string})`; "3xs": `var(--${string})`; "6xs": `var(--${string})`; "5xs": `var(--${string})`; "4xs": `var(--${string})`; }, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
maxHeight? | ConditionalStyle<Values<MapLeafNodes<Record<"xs" | "sm" | "md" | "lg" | "xl" | "2xs" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "3xs" | "6xs" | "5xs" | "4xs", string>, `var(--${string})`>, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
marginTop? | ConditionalStyle<Values<{ auto: string; "-xs": string; "-sm": string; "-md": string; "-lg": string; "-xl": string; "-2xs": string; "-2xl": string; "-3xl": string; "-4xl": string; "-5xl": string; "-6xl": string; "-3xs": string; xs: `var(--${string})`; sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; none: `var(--${string})`; "2xs": `var(--${string})`; "2xl": `var(--${string})`; "3xl": `var(--${string})`; "4xl": `var(--${string})`; "5xl": `var(--${string})`; "6xl": `var(--${string})`; "3xs": `var(--${string})`; }, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
marginRight? | ConditionalStyle<Values<{ auto: string; "-xs": string; "-sm": string; "-md": string; "-lg": string; "-xl": string; "-2xs": string; "-2xl": string; "-3xl": string; "-4xl": string; "-5xl": string; "-6xl": string; "-3xs": string; xs: `var(--${string})`; sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; none: `var(--${string})`; "2xs": `var(--${string})`; "2xl": `var(--${string})`; "3xl": `var(--${string})`; "4xl": `var(--${string})`; "5xl": `var(--${string})`; "6xl": `var(--${string})`; "3xs": `var(--${string})`; }, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
marginLeft? | ConditionalStyle<Values<{ auto: string; "-xs": string; "-sm": string; "-md": string; "-lg": string; "-xl": string; "-2xs": string; "-2xl": string; "-3xl": string; "-4xl": string; "-5xl": string; "-6xl": string; "-3xs": string; xs: `var(--${string})`; sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; none: `var(--${string})`; "2xs": `var(--${string})`; "2xl": `var(--${string})`; "3xl": `var(--${string})`; "4xl": `var(--${string})`; "5xl": `var(--${string})`; "6xl": `var(--${string})`; "3xs": `var(--${string})`; }, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
marginBottom? | ConditionalStyle<Values<{ auto: string; "-xs": string; "-sm": string; "-md": string; "-lg": string; "-xl": string; "-2xs": string; "-2xl": string; "-3xl": string; "-4xl": string; "-5xl": string; "-6xl": string; "-3xs": string; xs: `var(--${string})`; sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; none: `var(--${string})`; "2xs": `var(--${string})`; "2xl": `var(--${string})`; "3xl": `var(--${string})`; "4xl": `var(--${string})`; "5xl": `var(--${string})`; "6xl": `var(--${string})`; "3xs": `var(--${string})`; }, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
height? | ConditionalStyle<Values<{ none: string; full: string; device: string; xs: `var(--${string})`; sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; "2xs": `var(--${string})`; "2xl": `var(--${string})`; "3xl": `var(--${string})`; "4xl": `var(--${string})`; "5xl": `var(--${string})`; "6xl": `var(--${string})`; "3xs": `var(--${string})`; "6xs": `var(--${string})`; "5xs": `var(--${string})`; "4xs": `var(--${string})`; }, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
direction? | ConditionalValue<ConditionalAtomicStyles<{ readonly alignItems: readonly ["flex-start", "flex-end", "center", "stretch", "baseline"]; readonly display: readonly ["block", "none", "inline-flex", "inline", "flex"]; readonly flexDirection: readonly ["row", "column", "row-reverse", "column-reverse"]; readonly flexWrap: readonly ["wrap", "nowrap"]; readonly gap: MapLeafNodes<Record<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "2xs" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "3xs", string>, `var(--${string})`>; readonly justifyContent: readonly ["flex-start", "flex-end", "center", "stretch", "baseline", "space-around", "space-between", "space-evenly"]; }, { readonly xs: { '@media': string; }; readonly sm: { '@media': string; }; readonly md: { '@media': string; }; readonly lg: { '@media': string; }; readonly xl: { '@media': string; }; readonly default: {}; }, "default">, Orientation> | - |
Edit on GitHub
Last updated on