Message

Mensagens de feedback leves exibidas no topo central da tela.

Importação

import { message } from 'asterui'

Exemplos

Mensagens Básicas

Mensagens de feedback leves para ações do usuário.

</>

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

Mensagem de Carregamento

Mostre uma mensagem de carregamento que pode ser dispensada programaticamente.

</>

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

Duração Personalizada

Controle quanto tempo as mensagens permanecem visíveis.

</>

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

Empilhamento de Mensagens

Múltiplas mensagens empilham no topo central da tela.

</>

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

Opções de Message

Propriedade	Descrição	Tipo	Padrão
content	Texto da mensagem (primeiro argumento)	React.ReactNode	-
duration	Duração de fechamento automático em segundos	number	3
key	Identificador único. Atualizar com mesma chave atualiza mensagem existente	string	-
icon	Ícone personalizado para exibir	React.ReactNode	-
className	Classe CSS adicional	string	-
style	Estilos inline	React.CSSProperties	-
data-testid	ID de teste para frameworks de teste	string	-
onClick	Callback quando mensagem é clicada	() => void	-
onClose	Callback quando mensagem é fechada	() => void	-

Acessibilidade

• Mensagens são anunciadas para leitores de tela via regiões live
• Ícones fornecem pistas visuais juntamente com cor para tipo de mensagem
• Mensagens dispensam automaticamente mas podem ser configuradas para persistir