Modal

A modal serves as a root component for all varieties of dialog (confirm ...).

Zoning

Style

Sizing

The modal should adapt to the content:

• Width can vary between a minimum 660px up to 95% of the screen's width
• Height can expand up to 80% of the screen's height

Header

It can feature a description and / or an icon.

Header icon: Either a 24x24 icon from the library OR a provided logo. For devs this means either an IconName or a ReactElement. Enforce the 24x24 sizing if it’s an element.

Title and description: Both have an ellipsis if there isn’t enough space, the text will not wrap.

Content

Overflow should be vertically scrollable when needed, but horizontally hidden. Scroll is limited to the content section (header and footer remain fixed).

Buttons

Close button: Should say “cancel” when there are actions on the right, a “close” when there are none. Actions: Up to two, one primary, one secondary. Ideally can’t have a secondary if there’s no primary. Destructive: The primary action can be destructive.

Backdrop

Transparent layer behind every modal. Clicking it closes the modal by default, but this behavior can be disabled by a prop.

Variations

No disclosure (controlled state)

With disclosure

With icon

With custom icon

With description

With actions

With destructive primary action

With non closing backdrop

With overflowing header

With overflowing content

With everything

States

Interactions

Content

Usage

Accessibility