Notification

The built-in notification tag — a titled message card with a colored accent line, border, loading state, and radius. Usage, options, and live examples.

A built-in tag for a notification card — a titled message with a colored accent line, handy for showing a static “toast” inline in your docs. The message is the block body (or a text param); title is optional. Toggle withBorder, loading, and a decorative withCloseButton, and set the color and radius.

Use it as {% notification %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'notification', …).

Demonstrations

Title, message, and color

The message is the block body; title is optional; color sets the accent line:

Border and radius

withBorder draws a border around the card; radius rounds its corners:

Loading

loading swaps the accent line for a spinner — use it for an in-progress message:

Close button

withCloseButton shows a close button. It’s decorative here (a static page has no dismiss handler), so it’s off by default:

With other components

A dialog and a notification combine into a dismissable toast: the dialog supplies the corner anchor, the trigger button, and a real dismiss (its close button), while the notification supplies the toast styling — the colored accent line and the title. Click Show notification, then dismiss it with the close button in the panel’s corner.

Attributes

CSS Selectors

Each notification carries data-aardvark-island="Notification" on its wrapper, and Mantine exposes its parts as mantine-Notification-* classes — target either to style it from your theme CSS.

[data-aardvark-island="Notification"] {
  /* style every notification on the page */
}

.mantine-Notification-root {
  /* the root part */
}

.mantine-Notification-title {
  /* the title part */
}

.mantine-Notification-description {
  /* the description part */
}

.mantine-Notification-closeButton {
  /* the closeButton part */
}

Injecting Attributes

attr={…} forwards raw HTML attributes (including event handlers) straight onto the rendered element.