Alert

Afficher des messages importants et des notifications aux utilisateurs avec différents types et styles.

Importation

import { Alert } from 'asterui'

Exemples

Alerte basique

Alerte simple avec icône et texte.

</>

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

Types d'alertes

Différentes variantes de couleurs pour les états info, succès, avertissement et erreur.

</>

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

Avec bouton d'action

Alerte avec bouton de fermeture ou d'action.

</>

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

Style contour

Alerte avec variante contour pour une apparence plus légère.

</>

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

Style pointillé

Alerte avec variante bordure pointillée.

</>

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

Style doux

Alerte avec couleurs d'arrière-plan douces.

</>

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

Alerte fermable

Alerte avec bouton de fermeture et 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

Propriété	Description	Type	Défaut
children	Contenu de l’alerte	ReactNode	-
type	Variante de couleur de l’alerte	'info' | 'success' | 'warning' | 'error'	-
closable	Afficher le bouton de fermeture	boolean | { onClose?: () => void; closeIcon?: ReactNode; afterClose?: () => void }	false
outline	Style contour	boolean	false
dash	Style contour pointillé	boolean	false
soft	Style doux	boolean	false
vertical	Disposition verticale	boolean	false
className	Classes CSS supplémentaires	string	-

Accessibilité

• Utilise role="alert" pour les lecteurs d’écran
• La couleur n’est pas le seul indicateur - les icônes fournissent un contexte supplémentaire
• Les boutons d’action sont accessibles au clavier