@axa-fr/react-toolkit-button
TypeScript icon, indicating that this package has built-in type declarations

2.3.0 • Public • Published

@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;

Readme

Keywords

none

Package Sidebar

Install

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

Weekly Downloads

61

Version

2.3.0

License

MIT

Unpacked Size

92.6 kB

Total Files

33

Last publish

Collaborators

  • martinweb
  • fcornaire
  • guillaume.chervet.axa
  • samuel-gomez
  • antoine.blancke
  • arnaudforaison