@axa-fr/react-toolkit-alert

import Alert from '@axa-fr/react-toolkit-alert';
import '@axa-fr/react-toolkit-alert/dist/af-alert.css';

const AlertComponent = () => (
  <Alert
    classModifier="danger"
    icon="glyphicon glyphicon-alert"
    title="Warning: information is missing"
  />
);
export default AlertComponent;

import { AlertCore } from '@axa-fr/react-toolkit-alert';
import '@axa-fr/react-toolkit-alert/dist/af-alert.css';

const MyErrorAlert = () => (
  <AlertCore
    classModifier="error"
    iconClassName="glyphicon glyphicon-minus-sign"
    title="Error :">
    <ul>
      <li>Name is required</li>
      <li>Firstname is required</li>
      <li>Email is required</li>
      <li>The date format is invalid</li>
    </ul>
  </AlertCore>
);
export default MyErrorAlert;

import { AlertWithType } from '@axa-fr/react-toolkit-alert';
import '@axa-fr/react-toolkit-alert/dist/af-alert.css';

const MyInfoAlert = () => (
  <AlertWithType
    type="info"
    title="Info: you can also contact an advisor by phone"
  />
);
export default MyInfoAlert;