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:

<AssistedButton
  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
</AssistedButton>

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

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

function SomeReactComponent() {
    <AssistedButton buttonType='button'
        classObject= {{
            className: `custom-class`,
            replaceBaseClass: false,
            retainMissingModuleClasses: true,
        }}
        onClick={() => console.log('test console.log')}
    >
        <span>Test text</span>
    </AssistedButton>
}