Warn a user of a deadline
const [open, setOpen] = useState(false);<GoabButton type="secondary" onClick={() => setOpen(true)}>
Save for later
</GoabButton>
<GoabModal
heading="Complete submission prior to 1PM"
calloutVariant="important"
open={open}
onClose={() => setOpen(false)}
actions={
<GoabButtonGroup alignment="end">
<GoabButton type="primary" onClick={() => setOpen(false)}>
I understand
</GoabButton>
</GoabButtonGroup>
}
>
<p>
You've selected to adjourn a matter that is required to appear today. This Calgary court
location does not accept adjournment requests past 1PM MST. Please submit your
adjournment request as soon as possible.
</p>
</GoabModal>
);
}Use a modal with important callout styling to warn users about time-sensitive deadlines that could affect their submission or action.
When to use
Use this pattern when:
- Users are about to take an action with a time constraint
- Missing a deadline could have significant consequences
- The warning requires acknowledgment before proceeding
Considerations
- Be specific about the deadline (time, date, timezone)
- Explain the consequences of missing the deadline
- Provide a clear acknowledgment action
- Use the “important” callout variant for urgency
- Keep the message concise but informative