Notification

Muestra mensajes de notificación globales en las esquinas de la pantalla.

Importar

import { notification } from 'asterui'

Ejemplos

Notificaciones básicas

Diferentes tipos de notificación con mensajes 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

Posición

Muestra notificaciones en diferentes posiciones de esquina.

</>

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

Duración personalizada

Controla cuánto tiempo permanecen visibles las notificaciones.

</>

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 configuración

Propiedad	Descripción	Tipo	Predeterminado
message	Título de la notificación	React.ReactNode	-
description	Contenido de la notificación	React.ReactNode	-
duration	Duración de cierre automático en segundos	number	4.5
placement	Posición de la notificación	'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'	'topRight'
type	Tipo de notificación (para notification.open)	'success' | 'error' | 'info' | 'warning'	-

Métodos

• notification.success(config) - Notificación de éxito
• notification.error(config) - Notificación de error
• notification.info(config) - Notificación de información
• notification.warning(config) - Notificación de advertencia
• notification.open(config) - Notificación genérica con tipo personalizado

Accesibilidad

• Usa role="alert" para anuncios de lectores de pantalla
• Las notificaciones son accesibles por teclado y pueden descartarse con la tecla Escape
• El color y los iconos proporcionan información redundante para accesibilidad
• Una duración de 0 crea notificaciones persistentes que requieren descarte manual