Modal

Modals provide important information or present users with a decision to make. Modals have to be placed on a dark overlay which disables all the interactions with the screen behind. They can also be used as alert dialogs, which are used exclusively for non-repetitive interactions that are essential for user task completion. Use modals sparingly as they interrupt the users' journey.

UX/UI Guidelines

Check the design documentation of the component in ZeroHeight.

From Figma to code

...

Customization

INFO

Check everything about the customization mechanics in the "How it works" documentation.

CSS Variable	Type	Description
--z-modal--bg	color
--z-modal--color	color
--z-modal--padding	distance
--z-modal--backdrop	color

Accessibility

...

Related components