Back to all examples

Warn a user of a deadline

ReactAngularWeb Components
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