Skip to content

Dialog

The header is brand-coloured, so anything placed in it takes appearance="inverted".

title

content

contentHeader

Sits between the header and the content, outside the scrolling area.

actions

Buttons in the header, to the right of the built-in close button.

dialogHeader

Replaces the title prop when the header needs markup of its own — a heading with a subtitle, say. It takes the space between the actions and the right edge.

A row under the content, outside the scrolling area. SCAConfirmationDialog puts its buttons here.

size

padding

large for a form whose fields need room; medium is the default.

headerAppearance

plain keeps the body's background and moves the title left of the close button — for a dialog that reads as a message rather than as a screen.

hasCloseIcon

Off for a dialog that must not be dismissed from the header — a wizard step that owns its own navigation. Escape still emits close.

confirmOnEnter

On by default: Enter emits confirm. Turn it off for a dialog whose body owns the key — a grid, or a form with a multi-line field — and drive confirmation from a button instead. Only the most recently opened dialog reacts to Enter and Escape, so a confirmation opened on top of a dialog does not submit the one underneath.