Notification

Exibe mensagens de notificação globais nos cantos da tela.

Importação

import { notification } from 'asterui'

Exemplos

Notificações Básicas

Diferentes tipos de notificação com mensagens simples.

</>

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

Posicionamento

Mostra notificações em diferentes posições de canto.

</>

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

Duração Personalizada

Controla quanto tempo as notificações permanecem visíveis.

</>

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

Objeto de Configuração

Propriedade	Descrição	Tipo	Padrão
message	Título da notificação	React.ReactNode	-
description	Conteúdo da notificação	React.ReactNode	-
duration	Duração de fechamento automático em segundos	number	4.5
placement	Posição da notificação	'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'	'topRight'
type	Tipo de notificação (para notification.open)	'success' | 'error' | 'info' | 'warning'	-

Métodos

• notification.success(config) - Notificação de sucesso
• notification.error(config) - Notificação de erro
• notification.info(config) - Notificação informativa
• notification.warning(config) - Notificação de aviso
• notification.open(config) - Notificação genérica com tipo customizado

Acessibilidade

• Usa role="alert" para anúncios de leitor de tela
• Notificações são acessíveis por teclado e podem ser dispensadas com tecla Escape
• Cor e ícones fornecem informações redundantes para acessibilidade
• Duração definida como 0 cria notificações persistentes que requerem dispensa manual