Notification

Display global notification messages at screen corners.

Import

import { notification } from 'asterui'

Examples

Basic Notifications

Different notification types with simple messages.

</>

SuccessErrorInfoWarning

import { notification, Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="sm" wrap>
        <Button
          color="primary"
          onClick={() =>
            notification.success({
              message: 'Success',
              description: 'Your changes have been saved successfully.',
            })
          }
        >
          Success
        </Button>
  
        <Button
          onClick={() =>
            notification.error({
              message: 'Error',
              description: 'Failed to save changes. Please try again.',
            })
          }
        >
          Error
        </Button>
  
        <Button
          onClick={() =>
            notification.info({
              message: 'Information',
              description: 'This is an informational message.',
            })
          }
        >
          Info
        </Button>
  
        <Button
          onClick={() =>
            notification.warning({
              message: 'Warning',
              description: 'Your session will expire in 5 minutes.',
            })
          }
        >
          Warning
        </Button>
      </Space>
    )
}

export default App

Placement

Show notifications in different corner positions.

</>

Top LeftTop RightBottom LeftBottom Right

import { notification, Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="sm" wrap>
        <Button
          onClick={() =>
            notification.success({
              message: 'Top Left',
              description: 'Notification from top left corner.',
              placement: 'topLeft',
            })
          }
        >
          Top Left
        </Button>
  
        <Button
          onClick={() =>
            notification.success({
              message: 'Top Right',
              description: 'Notification from top right corner.',
              placement: 'topRight',
            })
          }
        >
          Top Right
        </Button>
  
        <Button
          onClick={() =>
            notification.success({
              message: 'Bottom Left',
              description: 'Notification from bottom left corner.',
              placement: 'bottomLeft',
            })
          }
        >
          Bottom Left
        </Button>
  
        <Button
          onClick={() =>
            notification.success({
              message: 'Bottom Right',
              description: 'Notification from bottom right corner.',
              placement: 'bottomRight',
            })
          }
        >
          Bottom Right
        </Button>
      </Space>
    )
}

export default App

Custom Duration

Control how long notifications stay visible.

</>

2 secondsDefault (4.5s)10 secondsNo Auto-close

import { notification, Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="sm" wrap>
        <Button
          onClick={() =>
            notification.info({
              message: 'Quick Message',
              description: 'This will close in 2 seconds.',
              duration: 2,
            })
          }
        >
          2 seconds
        </Button>
  
        <Button
          color="primary"
          onClick={() =>
            notification.info({
              message: 'Standard Message',
              description: 'This uses the default duration (4.5s).',
            })
          }
        >
          Default (4.5s)
        </Button>
  
        <Button
          onClick={() =>
            notification.info({
              message: 'Long Message',
              description: 'This will stay visible for 10 seconds.',
              duration: 10,
            })
          }
        >
          10 seconds
        </Button>
  
        <Button
          onClick={() =>
            notification.info({
              message: 'Persistent',
              description: 'This will not auto-close. Click to dismiss.',
              duration: 0,
            })
          }
        >
          No Auto-close
        </Button>
      </Space>
    )
}

export default App

API

Config Object

Property	Description	Type	Default
message	Notification title	React.ReactNode	-
description	Notification content	React.ReactNode	-
duration	Auto-close duration in seconds	number	4.5
placement	Position of notification	'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'	'topRight'
type	Type of notification (for notification.open)	'success' | 'error' | 'info' | 'warning'	-

Methods

• notification.success(config) - Success notification
• notification.error(config) - Error notification
• notification.info(config) - Info notification
• notification.warning(config) - Warning notification
• notification.open(config) - Generic notification with custom type

Accessibility

• Uses role="alert" for screen reader announcements
• Notifications are keyboard accessible and can be dismissed with Escape key
• Color and icons provide redundant information for accessibility
• Duration set to 0 creates persistent notifications that require manual dismissal