@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
7. Disabled Button

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;

Disabled Button

For a better accessibility (users to have focus on disabled buttons), you should use the aria-disabled attribute instead of the disabled attribute.

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

Be careful that using the aria-disabled attribute will not disable the button, so you have to handle the disabled state inside your onClick or onSubmit function.

const disabledButton = true;

<form
  onSubmit={event => {
    event?.preventDefault();
    if (!disabledButton) {
      // call function
    }
  }}>
  <Button classModifier="disabled" aria-disabled={disabledButton}>
    Lorem Ipsum
    <i className="glyphicon glyphicon-arrowthin-right" />
  </Button>
</form>
);
export default DisabledButton;