Components / Feedback
Modal
stableA focused dialog that blocks the rest of the page. Two distinct patterns: a confirmation with Cancel/primary actions, and an error modal for system-level failures.
Confirmation
Error modal
Info icon in a coloured circle — never a warning triangle for an ordinary error.
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
open | boolean | — | Yes | Controls visibility. |
onClose | () => void | — | Yes | Called on Escape, backdrop click, or the close button. |
title | string | — | Yes | Dialog title, also used for aria-labelledby. |
children | ReactNode | — | Yes | Body content. |
footer | ReactNode | — | No | Optional action row, right-aligned. |
Do
- Close on Escape, on backdrop click, and via the explicit close button — all three, every time.
- Lock body scroll while open.
- For an error modal specifically: use an info icon in a coloured circle, not a warning triangle, with a single full-width primary "OK" button.
Don't
- Use a Modal for a simple confirmation that a Toast could handle.
- Stack a second modal on top of an open one.
- Use a warning triangle for an ordinary error — reserve alarming iconography for genuinely urgent, rare situations.