@squiz/xaccel-assisted-button

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