@axa-fr/react-toolkit-alert

@axa-fr/react-toolkit-alert

1. Installation
2. Alert
3. AlertCore
4. Alert With Type

Installation

npm i @axa-fr/react-toolkit-alert

classModifier / type
danger
info
error
success

Alert

Import

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

Use

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

AlertCore

Import

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

Use

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;

Alert With Type

Import

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

Use

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