Alert

Exibir mensagens e notificações importantes para os usuários com diferentes tipos e estilos.

Importação

import { Alert } from 'asterui'

Exemplos

Alert Básico

Alert simples com ícone e 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 Alert

Diferentes variantes de cor para estados de informação, sucesso, aviso e erro.

</>

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

Com Botão de Ação

Alert com botão de dispensa ou ação.

</>

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

Alert com variante outline para uma aparência mais leve.

</>

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

Alert com variante de borda tracejada.

</>

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

Alert com cores de fundo 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

Alert Fechável

Alert com botão de fechar e 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

Propriedade	Descrição	Tipo	Padrão
children	Conteúdo do alert	ReactNode	-
type	Variante de cor do alert	'info' | 'success' | 'warning' | 'error'	-
closable	Mostrar botão de fechar	boolean | { onClose?: () => void; closeIcon?: ReactNode; afterClose?: () => void }	false
outline	Estilo outline	boolean	false
dash	Estilo outline tracejado	boolean	false
soft	Estilo suave	boolean	false
vertical	Layout vertical	boolean	false
className	Classes CSS adicionais	string	-

Acessibilidade

• Usa role="alert" para leitores de tela
• A cor não é o único indicador - ícones fornecem contexto adicional
• Botões de ação são acessíveis via teclado