Notification banner
Display important page level information or notifications.
Props
type
emergency | important | information | event
Define the context and colour of the notification.
maxcontentwidth
any
Maximum width of the content area.
Defaults to
100%.
arialive
assertive | off | polite
Indicates how assistive technology should handle updates to the live region.
Defaults to
polite.
testId
string
Sets a data-testid attribute for automated testing.
version
1 | 2
The design system version for styling purposes.
Defaults to
1.
emphasis
high | low
Sets the visual prominence. 'high' for full background, 'filled' for medium.
Defaults to
high.
compact
boolean
When true, reduces padding for a more compact notification.
Defaults to
false.
Events
onDismiss
(event: Event) => void
_dismiss
CustomEvent
Communicate a future service outage
<GoabNotification type="important">
Our system will be under maintenance from Thursday, September 15, 2025 at 10 pm
to Friday, September 16, 2025 at 10 am. If you have questions or concerns,
contact us at <a href="mailto:support@example.com">support@example.com</a>.
</GoabNotification>