Modal
An overlay that appears in front of all other content, and requires a user to take an action before continuing.
Props
calloutVariant
GoabModalCalloutVariant
Sets the context and colour of the callout modal. Required when used as a callout type.
maxWidth
string
Set the max allowed width of the modal.
Defaults to
60ch.
open
boolean
Controls if the modal is visible or not.
testId
string
Sets a data-testid attribute for automated testing.
transition
GoabModalTransition
Sets the animation transition when opening/closing. 'fast' or 'slow' for animated, 'none' for instant.
Events
onClose
() => void
Callback fired when the modal is closed. When provided, enables the close button and backdrop click-to-close behavior.
ReactNode
actions
ReactNode
Content rendered in the modal's actions slot, typically action buttons.
heading
ReactNode
The heading text displayed at the top of the modal.
Content
Do
Use descriptive language in both modal content and button text to inform users of the resulting destructive action.
Submitting the assessment will inform the proponent and email a copy of the report.
Do
Use a concise and descriptive modal title that spans less than one line.
Are you sure that you want to cancel your application? This action will permanently cancel your application and delete any information collected.
Do
Use descriptive language in content and button text for destructive actions.
Types
Do
Use the destructive button variant for actions that cannot be easily undone, like permanently deleting data or removing a user from a system.
Don't
Don't use a destructive button to trigger a confirmation. Reserve destructive styling for the final action inside the modal.
Other
Tip
Use closable=false for critical confirmations where the user must choose an explicit action, not just dismiss the dialog.
Interaction
Are you sure that you want to delete this record?
Do
Use a destructive button to indicate the final destructive action.
Submitting the assessment will inform the proponent.
Don't
Don't provide both action buttons and a close button on the same modal.
