@squiz/xaccel-assisted-button v1.15.0-beta.1

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

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>
}