@axa-fr/react-toolkit-button

@axa-fr/react-toolkit-button

• Installation
• Import
• Simple button
• Button circle
• Button with left icon
• Button with right icon
• 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;