Skip to main content
Version: v8.1.0-alpha.1

ontario-page-alert

Use page alerts to notify users of important information or changes on a page. There are four types of page alerts (i.e informational, warning, success and error).

Usage guidance​

Please refer to the Ontario Design System for current documentation guidance.

Configuration​

Once the component package has been installed (see Ontario Design System Component Library for installation instructions), the page alert component can be added directly into the project's code, and can be customized by updating the properties outlined here. Please see the examples below for how to configure the component.

Examples​

Example of a page alert with no type passed. This will default to an "informational" page alert type.

<ontario-page-alert heading="Licence plates">
	ServiceOntario centres may issue either a blue licence plate or a white embossed ‘Yours to Discover’ licence plate
	depending on availability.
	<a href="#">Learn more about replacing a licence plate</a>.
</ontario-page-alert>

ServiceOntario centres may issue either a blue licence plate or a white embossed ‘Yours to Discover’ licence plate depending on availability. Learn more about replacing a licence plate.

Example of success page alert type, where the content is passed as a string rather than as HTML.

<ontario-page-alert
	type="success"
	heading="Your payment was successful and your order is now complete."
	content="Please look out for an email confirmation with your receipt and order number. Your licence plate sticker should arrive in 2-4 weeks."
></ontario-page-alert>

Technical Note: SSR (Server-Side Rendering) Considerations​

The Ontario Page Alert component supports server-side rendering, with a few considerations:

  • Preferred content source: Pass page alert content through the content prop.
  • Slotted content caveat: Slotted children rely on fallback host.textContent, which is not reliably available during SSR.
  • Framework guidance: For deterministic SSR output, prefer content over slotted children.

SSR-safe example:​

<OntarioPageAlert type="error" heading="Submission failed" content="Please try again."></OntarioPageAlert>

Overview​

Ontario Page Alert is used for high-importance status messages that apply to the whole page (for example informational, warning, success, or error outcomes).

For component selection guidance, see:

Properties​

PropertyAttributeDescriptionTypeDefault
contentcontentThe main content for the page alert. This can be rendered as either string or HTML content.stringundefined
headingheadingThe heading for the page alert.stringundefined
typetypeThe type of page alert to render. If no value is provided, the informational type alert would be rendered. There are four possible values for page alert: informational, warning, success or error."error" | "informational" | "success" | "warning"'informational'

Dependencies​

Depends on​

Graph​

Built with StencilJS