Notification banner

Display important page level information or notifications.

Props

ariaLive

GoabAriaLiveType

Indicates how assistive technology should handle updates to the live region.

Defaults to polite.

compact

boolean

When true, reduces padding for a more compact notification.

emphasis

GoabNotificationEmphasis

Sets the visual prominence. 'high' for full background, 'low' for a bordered style.

Defaults to high.

maxContentWidth

string

Maximum width of the content area.

Defaults to 100%.

testId

string

Sets a data-testid attribute for automated testing.

type

GoabNotificationType

Define the context and colour of the notification.

Events

onDismiss

() => void

Callback fired when the notification is dismissed.

Examples

Notify the user of 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>

<goab-notification 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&#64;example.com</a>.
</goab-notification>

<goa-notification version="2" 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>.
</goa-notification>

No usage guidelines have been documented for this component yet.

All GoA Design System components are built to meet WCAG 2.2 AA standards. The following guidelines provide additional context for accessible implementation.

No accessibility-specific guidelines have been documented for this component yet.

View old component docs

Props

Events

Notify the user of a future service outage

Related components