Notifications & Modals Shortcodes

Documentation and live specimens for alerts, toast notifications, accessible modal dialogs, and skeleton loading states.

Read Time: 3 min

Feedback components provide real-time status notices, confirmations, and focus-trapped dialogs to guide user actions.

1. Inline Notification (notification)

The notification shortcode renders Carbon inline banners communicating essential system status, warnings, errors, or successes. Following official @carbon/web-components specifications, notifications render as <cds-inline-notification> or <cds-actionable-notification> when equipped with action buttons.

Parameters

ParameterTypeDefaultDescription
kindString"info"Status variant (info, success, warning, error, ai)
titleStringRequiredNotification headline
subtitleStringOptionalExplanatory description
actionTextStringOptionalLabel for interactive action button
actionHrefStringOptionalTarget URL for action button
hideCloseBoolean"false"When set to "true", suppresses the dismiss close button
lowContrastBooleanfalseWhen true, displays lower contrast container style

Examples

View Docs 
1
2
3
4
5
6
7
8

{{< notification kind="info" title="Scheduled Maintenance" subtitle="Origin servers will undergo non-disruptive kernel upgrades on Sunday at 02:00 UTC." >}}
{{< /notification >}}

{{< notification kind="success" title="Build Completed" subtitle="All static assets were compiled and verified against WCAG 2.1 AA benchmarks." actionText="View Docs" actionHref="/docs/" >}}
{{< /notification >}}

{{< notification kind="error" title="Validation Notice" subtitle="Static analysis detected missing metadata fields." hideClose="true" >}}
{{< /notification >}}

2. Toast Notification (toast)

Toast notifications deliver non-obtrusive, temporary feedback at the edge of the viewport.

Parameters

ParameterTypeDefaultDescription
kindString"info"Status variant (info, success, warning, error)
titleStringRequiredShort headline
subtitleStringOptionalDescription text
captionStringOptionalTimestamp or supplemental status notice

Example

CSV dataset with companion W3C metadata has been prepared.
1
2
3

{{< toast type="success" title="Export Ready" caption="01:14 UTC" >}}
CSV dataset with companion W3C metadata has been prepared.
{{< /toast >}}

3. Modal Dialog (modal)

The modal shortcode renders an accessible dialog box with keyboard focus trapping, Escape key dismissal, and primary/secondary actions.

Parameters

ParameterTypeDefaultDescription
idStringRequiredUnique modal element identifier
titleStringRequiredModal dialog headline
labelStringOptionalEyebrow category tag
primaryButtonString"Confirm"Text for primary action button
secondaryButtonString"Cancel"Text for secondary dismiss button

Example

Open Modal: Confirm Asset Deployment Build Process Confirm Asset Deployment You are about to synchronize static artifacts with the Anycast distribution edge. This process purges the global CDN cache immediately. Cancel Deploy Now
1
2
3

{{< modal id="demo-modal" title="Confirm Asset Deployment" label="Build Process" primaryButton="Deploy Now" secondaryButton="Cancel" triggerText="Open Modal Dialog Specimen" >}}
You are about to synchronize static artifacts with the Anycast distribution edge. This process purges the global CDN cache immediately.
{{< /modal >}}

4. Skeleton States (skeleton & loading)

Skeleton loaders display animated placeholders while data or heavy assets load asynchronously.

Parameters

  • type: text, heading, paragraph, button, card, table, icon

Example

1
2
3

{{< skeleton type="heading" width="40%" >}}
{{< skeleton type="paragraph" lines="3" >}}
{{< skeleton type="button" width="120px" >}}