Alert

Muestra mensajes importantes y notificaciones a los usuarios con diferentes tipos y estilos.

Importar

import { Alert } from 'asterui'

Ejemplos

Alert Básico

Alerta simple con icono y texto.

</>

This is a basic alert

import { Alert } from 'asterui'
import { InformationCircleIcon } from '@aster-ui/icons'

function App() {
  return (
      <Alert>
        <InformationCircleIcon size="lg" className="shrink-0" />
        <span>This is a basic alert</span>
      </Alert>
    )
}

export default App

Tipos de Alerta

Diferentes variantes de color para estados de información, éxito, advertencia y error.

</>

Info: New software update available

Success: Your purchase has been confirmed

Warning: Invalid email address

Error: Invalid credentials

import { Alert, Space } from 'asterui'
import { InformationCircleIcon, CheckCircleIcon, ExclamationTriangleIcon, XCircleIcon } from '@aster-ui/icons'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <Alert type="info">
          <InformationCircleIcon size="lg" className="shrink-0" />
          <span>Info: New software update available</span>
        </Alert>
  
        <Alert type="success">
          <CheckCircleIcon size="lg" className="shrink-0" />
          <span>Success: Your purchase has been confirmed</span>
        </Alert>
  
        <Alert type="warning">
          <ExclamationTriangleIcon size="lg" className="shrink-0" />
          <span>Warning: Invalid email address</span>
        </Alert>
  
        <Alert type="error">
          <XCircleIcon size="lg" className="shrink-0" />
          <span>Error: Invalid credentials</span>
        </Alert>
      </Space>
    )
}

export default App

Con Botón de Acción

Alerta con botón de descarte o acción.

</>

We use cookies for no reason

Accept

import { Alert, Button } from 'asterui'
import { ExclamationTriangleIcon } from '@aster-ui/icons'

function App() {
  return (
      <Alert type="warning">
        <ExclamationTriangleIcon size="lg" className="shrink-0" />
        <span>We use cookies for no reason</span>
        <div>
          <Button size="sm">Accept</Button>
        </div>
      </Alert>
    )
}

export default App

Estilo Outline

Alerta con variante de contorno para una apariencia más ligera.

</>

Info outline alert

Success outline alert

import { Alert, Space } from 'asterui'
import { InformationCircleIcon, CheckCircleIcon } from '@aster-ui/icons'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <Alert type="info" outline>
          <InformationCircleIcon size="lg" className="shrink-0" />
          <span>Info outline alert</span>
        </Alert>
  
        <Alert type="success" outline>
          <CheckCircleIcon size="lg" className="shrink-0" />
          <span>Success outline alert</span>
        </Alert>
      </Space>
    )
}

export default App

Estilo Dash

Alerta con variante de borde punteado.

</>

Warning dash alert

Error dash alert

import { Alert, Space } from 'asterui'
import { ExclamationTriangleIcon, XCircleIcon } from '@aster-ui/icons'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <Alert type="warning" dash>
          <ExclamationTriangleIcon size="lg" className="shrink-0" />
          <span>Warning dash alert</span>
        </Alert>
  
        <Alert type="error" dash>
          <XCircleIcon size="lg" className="shrink-0" />
          <span>Error dash alert</span>
        </Alert>
      </Space>
    )
}

export default App

Estilo Soft

Alerta con colores de fondo suaves.

</>

Info soft alert

Success soft alert

import { Alert, Space } from 'asterui'
import { InformationCircleIcon, CheckCircleIcon } from '@aster-ui/icons'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <Alert type="info" soft>
          <InformationCircleIcon size="lg" className="shrink-0" />
          <span>Info soft alert</span>
        </Alert>
  
        <Alert type="success" soft>
          <CheckCircleIcon size="lg" className="shrink-0" />
          <span>Success soft alert</span>
        </Alert>
      </Space>
    )
}

export default App

Alerta Cerrable

Alerta con botón de cierre y callbacks.

</>

Closable alert with default close button✕

Closable with onClose and afterClose callbacks✕

Closable with custom close icon×

import { Alert, Space, message } from 'asterui'
import { InformationCircleIcon, CheckCircleIcon, ExclamationTriangleIcon } from '@aster-ui/icons'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <Alert type="info" closable>
          <InformationCircleIcon size="lg" className="shrink-0" />
          <span>Closable alert with default close button</span>
        </Alert>
  
        <Alert
          type="success"
          closable={{
            onClose: () => message.success('Success alert closed'),
            afterClose: () => message.info('After close callback executed')
          }}
        >
          <CheckCircleIcon size="lg" className="shrink-0" />
          <span>Closable with onClose and afterClose callbacks</span>
        </Alert>
  
        <Alert
          type="warning"
          closable={{
            closeIcon: <span className="text-lg font-bold">×</span>,
            onClose: () => message.warning('Custom close icon clicked')
          }}
        >
          <ExclamationTriangleIcon size="lg" className="shrink-0" />
          <span>Closable with custom close icon</span>
        </Alert>
      </Space>
    )
}

export default App

API

Alert

Propiedad	Descripción	Tipo	Predeterminado
children	Contenido de la alerta	ReactNode	-
type	Variante de color de la alerta	'info' | 'success' | 'warning' | 'error'	-
closable	Mostrar botón de cierre	boolean | { onClose?: () => void; closeIcon?: ReactNode; afterClose?: () => void }	false
outline	Estilo de contorno	boolean	false
dash	Estilo de contorno punteado	boolean	false
soft	Estilo suave	boolean	false
vertical	Disposición vertical	boolean	false
className	Clases CSS adicionales	string	-

Accesibilidad

• Usa role="alert" para lectores de pantalla
• El color no es el único indicador - los iconos proporcionan contexto adicional
• Los botones de acción son accesibles mediante teclado