Notification

An inline notification component for persistent, contextual messages within page content.

Overview

Notification renders a persistent inline message within page content — more prominent than an Alert but not temporarily auto-dismissed like a Toast. Supports multiple variants, icons, and dismiss.

Update available

A new version of DS0 is available. Please update to get the latest features.

Payment received

Your payment of $49.99 has been processed successfully.

Storage almost full

You have used 90% of your storage quota. Consider upgrading your plan.

Upload failed

The file could not be uploaded. Please check your connection and try again.

Usage

<Notification variant="info" title="Update Available">
  A new version of the application is ready to install.
</Notification>

Variants

<Notification variant="info">Info message</Notification>
<Notification variant="success">Success message</Notification>
<Notification variant="warning">Warning message</Notification>
<Notification variant="error">Error message</Notification>

API Reference

Prop	Type	Default	Description
`variant`	`'info' \| 'success' \| 'warning' \| 'error'`	`'info'`	Visual style
`title`	`string`	—	Notification title
`dismissible`	`boolean`	`false`	Show dismiss button
`onDismiss`	`() => void`	—	Dismiss callback
`icon`	`ReactNode`	Auto by variant	Custom icon

Accessibility

Uses role="status" or role="alert" based on variant
Dismiss button has aria-label="Dismiss notification"

Component	When to Use Instead
Alert	Simpler inline message
Toast	Temporary auto-dismissing
Banner	Full-width announcement