Assisted Button

Description

This component will create button or anchor tag with the settings provided by the user. It can be used in any other repository.

Components properties

| Property | Property description | Property type | IsRequired |
| :------------------: | :-------------------------: | :---------------: | :--------: |
| buttonType | Item type - button or a | string | [x] |
| classObject | The object of class names | classNameOverride | |
| ...jsxElementProps | button or anchor attributes | strings | |

Conditional component presentation

- Displaying anchor:
To display anchor tag please set buttonType to 'a'.
- Displaying button:
To display button tag please set buttonType to 'button'

Props Example:

``JSX
buttonType="button"
onClick={() => console.log('test console.log')}
classObject={{
className: "storybook-button",
cssModule: {
'storybook-button__wrapper': 'button__wrapper--customForTest',
},
replaceBaseClass: false,
retainMissingModuleClasses: true,
}}
>
Click me

`

For more information about classObject please visit packages/utility/functions/src/generateClasses.js

Usage

Install the package by running: npm i @squiz/xaccel-assisted-button

`JSX
import AssistedButton from '@squiz/xaccel-assisted-button';

function SomeReactComponent() {
classObject= {{
className: custom-class,
replaceBaseClass: false,
retainMissingModuleClasses: true,
}}
onClick={() => console.log('test console.log')}
>
Test text

}
``