Notification
A toast-style notification panel for displaying transient feedback. Supports success, error, warning, and info variants with optional actions and close button.
Molecule
Icon · Button
When To Use
- Use buttons for explicit user-triggered actions such as submit, save, continue, or open.
- Choose the variant and size that matches the action hierarchy in the surrounding view.
- Prefer this page when you need to compare action density, icon usage, and loading or disabled states side by side.
When Not To Use
- Do not use a button when plain text, static status, or passive decoration would communicate the state just as well.
- Do not overload a single view with too many equally prominent buttons; reduce or demote secondary actions first.
Accessibility Notes
- Maintain heading order and region labels so the surrounding layout stays understandable when styles are stripped away.
- Avoid using visual grouping alone to explain hierarchy; expose the structure semantically as well.
- Make sure drag, resize, and reorder interactions have keyboard alternatives when they are part of the core task.
Key Props / API
Props
title, description, icon, variant, actions, onClose
Example Code
import { Notification } from "@hilum/ui"
<Notification
title="Successfully saved!"
description="Anyone with a link can now view this file."
/>Notification · Basic
Default
Title + description, no icon variant
Successfully saved!
Anyone with a link can now view this file.
Notification · Variants
success · error · warning · info
Semantic icon colors for each state
Payment received
Your invoice has been paid.
Upload failed
The file exceeds the 10MB limit.
Storage almost full
You've used 90% of your 100GB quota.
New release available
Version 2.4.0 is now available.
Notification · Interactive
Saved successfully
Your changes have been published.
With actions
Inline action buttons
New comment on your post
Marcus replied: "Looks great, ship it!"
Custom icon
Any Lucide icon
You have a new message
Sofia sent you a direct message.