Get startedPatternsComponentsStylesContentSupport
Select your development framework to see all code in your development languages. You can change this in the top right of the screen.
AllAccordionBadgeBlockButtonButton groupCalloutCheckboxContainerDate pickerDetailsDividerDropdownFile uploaderFilter chipFooterForm itemForm stepperGridHeaderHero bannerIconsIcon buttonInputListMicrosite headerModalNotification bannerPaginationPopoverProgress indicatorRadioSide menuSkeleton loadingSpacerTableTabsTextText areaTooltip

Notification Banner

Display important page level information or notifications.

Related components: Callout
Code examples
Notification banner message
<GoANotification type="information">
  Notification banner message
</GoANotification>
typesuccess | important | information | emergency
Define the context and colour of the badge
maxContentWidthstring
Maximum width of the content area
ariaLivestring
Indicates how assistive technology should handle updates to the live region Defaults to polite.
onDismiss() => void
Dispatched when notification banner is closed.
Design guidelines
Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
Book time in drop in hours
Get startedPatternsComponentsStylesContentSubmit an issue#design-system-supportContribute to the design systemGive feedbackRelease notes