GC Design SystemComponents
GC Design System Start to use Page templates overviewBasic page Components overviewAlertBreadcrumbsButtonCardCheckboxesContainerDate inputDate modifiedDetailsError messageError summaryFieldsetFile uploaderFooterGridHeaderHeadingIconInputLanguage toggleLinkNoticePaginationRadiosScreenreader-onlySearchSelectSide navigationSignatureStepperTableTextTextareaTheme and topic menuTop navigation CSS Shortcuts overview Reset styles Responsive layoutState Box sizingContainer sizingDisplayOverflowPositionVisibility FontFont familyFont sizeFont styleFont weightLine heightLink colourLink sizeLink text decorationList styleText alignText colourText overflowText transformWord break MarginPadding Align contentAlign itemsAlign selfFlexFlex directionFlex growFlex shrinkFlex wrapGapGrid columnsGrid rowsJustify contentJustify itemsJustify selfOrderPlace contentPlace itemsPlace self Background colourBorder colourBorder radiusBorder styleBorder width Icon namesIcon sizeImage CursorPointer eventsTransition Styles overviewDesign tokensColourSpacingTypography Contact usGet InvolvedFind a demo

Alert
<gcds-alert>

Also called: message, inline message. The alert is an interactive object that communicates important information to the user.
  • GitHub
  • Figma

Alert component preview

Take a look at what alerts do to see if they fit the problem you’re solving for. Then select the best subtype, called the alert role, for the use case you need to meet.

Problems alerts solve

Use an alert to:
  • Communicate information that appears dynamically in response to an event, such as:
    • a person’s action, like submitting an application or saving progress.
    • a system event, like a report being ready to download or a password about to expire.
  • Communicate important or time-sensitive information when users should be made aware of it promptly.
  • Display messages without interrupting the current task.
Avoid using an alert for messages that are part of the page content and are already there when the page loads. Use a notice instead.
Banner for site or product-level messages. Error messages or error summary for errors in form fields. Notice for prominent messages that are part of the page content. Alert dialogue for messages that interrupt a user task.

Alert roles

The alert role changes the styling of the alert to visually signal its purpose. Pick the role relevant to your use case.

Information

Use the information role to:
  • Inform people about the current state of their task, access, or eligibility.
  • Provide status updates about a task or background process.
  • Communicate contextual information that helps people understand why an action is unavailable or no longer needed.
  • Inform people about non-critical information that’s relevant to their current task or situation.

You can only have one application in progress at a time. Finish or withdraw your current application before satrting another one.

Success

Use the success role to:
  • Confirm that a person’s action was completed successfully.
  • Notify people when a requested process or task has finished successfully.

You can always review your preferences in Settings.

Warning

Use the warning role to:
  • Inform people about conditions that may affect their current task.
  • Explain the potential consequences of continuing with an action.

Change your password to keep access to your account.

Danger

Use the danger role to:
  • Communicate when an action could not be completed successfully.
  • Explain a problem that’s preventing a person from completing their current task.

Check your information and try again.
Help us improve Have questions or a request? Give feedback on our contact form. Something's wrong? Raise it through GitHub with an account. You'll have access to the team's direct responses, progress made on your issue, and issues raised by others. Give feedback Report an issue on GitHub
2026-09-09