Skip to content

Latest commit

 

History

History
59 lines (42 loc) · 1.8 KB

README.md

File metadata and controls

59 lines (42 loc) · 1.8 KB
Raw

Alert

Get started

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

Components

Alert

To use this component, you need to provide a classModifier to define the alert type, which will also pick a default icon. A default icon will be displayed if none is provided in props and the first class modifier is :

  • error -> glyphicon-exclamation-sign
  • danger -> glyphicon-alert
  • info -> glyphicon-info-sign
  • success -> glyphicon-ok

This example will display an orange alert with the "alert" glyphicon.

import React from 'react';
import Alert from '@axa-fr/react-toolkit-alert';
const MyDangerAlert => () => (
  <Alert classModifier="danger" title="Caution !!!">
    Please make sure you've backed up your application before going further.
  </Alert>
)

AlertCore

This core component does not assign an icon depending on the classModifier.

You have to explicitly define it in the "icon" prop :

import React from 'react';
import { AlertCore } from '@axa-fr/react-toolkit-alert';
const MyErrorAlert => () =>
  <AlertCore classModifier="error" iconClassName="glyphicon glyphicon-exclamation-sign" title="Error !"/>

AlertWithType

This component has its own prop to declare the Alert type, rather than relying on classModifier.

The prop type has only 4 possible values : error, danger, info and success

This example will display a blue alert with an info-sign glyphicon :

import React from 'react';
import { AlertWithType } from '@axa-fr/react-toolkit-alert';
const MyInfoAlert => () =>
  <AlertWithType type="info" title="An apple a day keeps the doctor away."/>