@axa-fr/react-toolkit-button

1. Installation
2. Import
3. Simple button
4. Button circle
5. Button with left icon
6. Button with right icon

Installation

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

Import

import SimpleButton from '@axa-fr/react-toolkit-button';
import '@axa-fr/react-toolkit-button/dist/af-button.css';

Simple button

const Button = () => <SimpleButton>Lorem Ipsum</SimpleButton>;
export default Button;

Button	classModifier
Reverse Button	reverse
Disabled Button	disabled
Success Button	success
Danger Button	danger
Small Button	small

You can see the example below :

const ReverseButton = () => (
  <SimpleButton classModifier="reverse">Lorem Ipsum</SimpleButton>
);
export default ReverseButton;

Button circle

const CircleButton = () => (
  <SimpleButton className="af-btn--circle glyphicon glyphicon-floppy-disk" />
);
export default CircleButton;

Button with left icon

const LeftIconButton = () => (
  <Button classModifier="hasiconLeft">
    Lorem Ipsum
    <i className="glyphicon glyphicon-arrowthin-left" />
  </Button>
);
export default LeftIconButton;

Button with right icon

const RightIconButton = () => (
  <Button classModifier="hasiconRight">
    Lorem Ipsum
    <i className="glyphicon glyphicon-arrowthin-right" />
  </Button>
);
export default RightIconButton;