Message

Lightweight feedback messages displayed at the top center of the screen.

Import

import { message } from 'asterui'

Examples

Basic Messages

Lightweight feedback messages for user actions.

</>

SuccessErrorInfoWarning

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

function App() {
  return (
      <Space direction="horizontal" size="sm" wrap>
        <Button
          color="primary"
          onClick={() => message.success('Changes saved successfully')}
        >
          Success
        </Button>
  
        <Button
          onClick={() => message.error('Failed to save changes')}
        >
          Error
        </Button>
  
        <Button
          onClick={() => message.info('New updates available')}
        >
          Info
        </Button>
  
        <Button
          onClick={() => message.warning('Session expires in 5 minutes')}
        >
          Warning
        </Button>
      </Space>
    )
}

export default App

Loading Message

Show a loading message that can be dismissed programmatically.

</>

Submit

import { message, Button } from 'asterui'
import { useState } from 'react'

function App() {
  const [loadingId, setLoadingId] = useState<string | null>(null);
  
  const handleClick = () => {
    const id = message.loading('Processing...');
    setLoadingId(id);
  
    setTimeout(() => {
      message.destroy(id);
      message.success('Done!');
      setLoadingId(null);
    }, 2000);
  };
  
  return (
      <Button onClick={handleClick} disabled={!!loadingId}>
        {loadingId ? 'Processing...' : 'Submit'}
      </Button>
    )
}

export default App

Custom Duration

Control how long messages stay visible.

</>

1 secondDefault (3s)6 seconds

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

function App() {
  return (
      <Space direction="horizontal" size="sm" wrap>
        <Button
          onClick={() => message.info('Quick message', { duration: 1 })}
        >
          1 second
        </Button>
  
        <Button
          color="primary"
          onClick={() => message.info('Default duration')}
        >
          Default (3s)
        </Button>
  
        <Button
          onClick={() => message.info('Longer message', { duration: 6 })}
        >
          6 seconds
        </Button>
      </Space>
    )
}

export default App

Stacking Messages

Multiple messages stack at the top center of the screen.

</>

Show Multiple

import { message, Button } from 'asterui'

function App() {
  return (
      <Button
        color="primary"
        onClick={() => {
          message.success('First message');
          setTimeout(() => message.info('Second message'), 300);
          setTimeout(() => message.warning('Third message'), 600);
        }}
      >
        Show Multiple
      </Button>
    )
}

export default App

API

Message Options

Property	Description	Type	Default
content	Message text (first argument)	React.ReactNode	-
duration	Auto-close duration in seconds	number	3
key	Unique identifier. Updating with same key updates existing message	string	-
icon	Custom icon to display	React.ReactNode	-
className	Additional CSS class	string	-
style	Inline styles	React.CSSProperties	-
data-testid	Test ID for testing frameworks	string	-
onClick	Callback when message is clicked	() => void	-
onClose	Callback when message is closed	() => void	-

Accessibility

• Messages are announced to screen readers via live regions
• Icons provide visual cues alongside color for message type
• Messages auto-dismiss but can be configured to persist