Dialog
Usage
Dialog
is a simplified version of Modal component.
It does not include most of accessibility and usability Modal features:
- Focus trap is not available
- Does not close on click outside
- Does not have overlay
Use Dialog
to attract attention with not important information or action,
for example, you can create an email subscription form:
Change position
Dialog
is rendered in Portal and has fixed position, set position
prop to control dialog's position:
Paper props
Dialog
supports all props from Paper component,
you can customize shadow
, padding
and radius
same way.
Change transition
Dialog
supports all transitions from Transition component.
To change transition provide following props:
- transition – predefined transition name or transition object
- transitionDuration – transition duration in ms, defaults to 200ms
- transitionTimingFunction – timing function, defaults to
theme.transitionTimingFunction
Accessibility
Dialog
is not accessible and most likely will not be announced by screen reader,
make sure you do not put any important information. In most cases it would be much better
to select Modal, Drawer or Notifications.
Dialog component props
Name | Type | Description |
---|---|---|
children | ReactNode | Dialog content |
keepMounted | boolean | If set dialog will not be unmounted from the DOM when it is hidden, display: none styles will be added instead |
onClose | () => void | Called when close button is clicked |
opened * | boolean | Opened state |
position | { top?: string | number; left?: string | number; bottom?: string | number; right?: string | number; } | Dialog position (fixed in viewport) |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default |
shadow | MantineShadow | Predefined box-shadow from theme.shadows (xs, sm, md, lg, xl) or any valid css box-shadow property |
size | string | number | Dialog width |
transition | MantineTransition | Appear/disappear transition |
transitionDuration | number | Duration in ms of modal transitions, set to 0 to disable all animations |
transitionTimingFunction | string | Transition timing function, defaults to theme.transitionTimingFunction |
withBorder | boolean | Adds border styles |
withCloseButton | boolean | Display close button at the top right corner |
zIndex | ZIndex | Dialog container z-index |
Dialog component Styles API
Name | Static selector | Description |
---|---|---|
root | .asuikit-Dialog-root | Root element |
closeButton | .asuikit-Dialog-closeButton | Close button |