Message

Mensajes de retroalimentación ligeros mostrados en el centro superior de la pantalla.

Importar

import { message } from 'asterui'

Ejemplos

Mensajes Básicos

Mensajes de retroalimentación ligeros para acciones del usuario.

</>

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

Mensaje de Carga

Muestra un mensaje de carga que puede ser descartado programáticamente.

</>

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

Duración Personalizada

Controla cuánto tiempo permanecen visibles los mensajes.

</>

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

Apilamiento de Mensajes

Múltiples mensajes se apilan en el centro superior de la pantalla.

</>

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

Opciones de Message

Propiedad	Descripción	Tipo	Predeterminado
content	Texto del mensaje (primer argumento)	React.ReactNode	-
duration	Duración de cierre automático en segundos	number	3
key	Identificador único. Actualizar con la misma clave actualiza el mensaje existente	string	-
icon	Icono personalizado a mostrar	React.ReactNode	-
className	Clase CSS adicional	string	-
style	Estilos en línea	React.CSSProperties	-
data-testid	ID de prueba para frameworks de testing	string	-
onClick	Callback cuando se hace clic en el mensaje	() => void	-
onClose	Callback cuando se cierra el mensaje	() => void	-

Accesibilidad

• Los mensajes se anuncian a lectores de pantalla a través de regiones en vivo
• Los iconos proporcionan señales visuales junto con el color para el tipo de mensaje
• Los mensajes se descartan automáticamente pero pueden configurarse para persistir