npm package: @licuido-ui/ui_coach-mark
Description: Coach marks are temporary messages that educate users through new or unfamiliar product experiences. They can be chained into a sequence to form a tour.
Latest version: 0.0.2

# CoachMark

Coach marks are temporary messages that educate users through new or unfamiliar product experiences. They can be chained into a sequence to form a tour.

## Installation

```sh
npm i @licuido-ui/ui_coach-mark
```

## Import component

```jsx
import { CoachMark } from '@licuido-ui/ui_coach-mark';
```

## Usage

```jsx
<CoachMark stepData={[]} showSkipButton={true} overlayBgColor={"} />
```

## Props

| **Name**                    | **Description**                                                                                       | **Default**       | **Control**                                                                                                                                                                             |
| --------------------------- | ----------------------------------------------------------------------------------------------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **className**               | Override or extend the styles applied to the component\.string                                        | ""                |
| **rootStyle**               | The rootStyle prop that allows defining system overrides as well as additional CSS styles\.           | \-                | rootStyle : \{\}                                                                                                                                                                        |
| **stepData**                | Array of options\.                                                                                    | \-                | stepData : \[0 : \{\.\.\.\} 6 keys1 : \{\.\.\.\} 5 keys2 : \{\.\.\.\} 5 keys3 : \{\.\.\.\} 5 keys4 : \{\.\.\.\} 5 keys5 : \{\.\.\.\} 5 keys6 : \{\.\.\.\} 5 keys7 : \{\.\.\.\} 5 keys\] |
| **showSkipButton**          | Handle Show or Not show the Skip buttonboolean                                                        |                   | True                                                                                                                                                                                    |
| **optionsWidth**            | optionsWidth will take up the width of its container                                                  | \-                |
| **tooltipFooterStyle**      | The tooltipFooterStyle prop that allows defining system overrides as well as additional CSS styles\.  | \-                | tooltipFooterStyle : \{\}                                                                                                                                                               |
| **tooltipTitleStyle**       | The tooltipTitleStyle prop that allows defining system overrides as well as additional CSS styles\.   | \-                | tooltipTitleStyle : \{\}                                                                                                                                                                |
| **tooltipTitleColor**       | The tooltipTitleColor prop that allows to change color                                                | \-                | linear\-gradient\(rgb\(255, 255, 255\), rgb\(255, 255, 255\)\);">                                                                                                                       |
| **tooltipTitleFontSize**    | The tooltipTitleFontSize prop that allows to change Font size                                         | \-                |
| **overlayStyle**            | The overlayStyle prop that allows defining system overrides as well as additional CSS styles\.        | \-                | overlayStyle : \{\}                                                                                                                                                                     |
| **overlayBgColor**          | The overlayBgColor prop that allows to change overlay Background color                                | \-                | linear\-gradient\(rgb\(255, 255, 255\), rgb\(255, 255, 255\)\);">                                                                                                                       |
| **spotlightStyle**          | The spotlightStyle prop that allows defining system overrides as well as additional CSS styles\.      | \-                | spotlightStyle : \{\}                                                                                                                                                                   |
| **spotlightBgColor**        | The spotlightBgColor prop that allows to change Background color                                      | \-                | linear\-gradient\(rgb\(255, 255, 255\), rgb\(255, 255, 255\)\);">                                                                                                                       |
| **beaconStyle**             | The beaconStyle prop that allows defining system overrides as well as additional CSS styles\.         | \-                | beaconStyle : \{\}                                                                                                                                                                      |
| **beaconSize**              | The beaconSize prop that allows to change Font size                                                   | \-                |
| **beaconInnerBgColor**      | The beaconInnerBgColor prop that allows to change overlay Background color                            | \-                | linear\-gradient\(rgb\(255, 255, 255\), rgb\(255, 255, 255\)\);">                                                                                                                       |
| **beaconOuterColor**        | The beaconOuterColor prop that allows to change outer color                                           | \-                | linear\-gradient\(rgb\(255, 255, 255\), rgb\(255, 255, 255\)\);">                                                                                                                       |
| **beaconInnerStyle**        | The beaconInnerStyle prop that allows defining system overrides as well as additional CSS styles\.    | \-                | beaconInnerStyle : \{\}                                                                                                                                                                 |
| **beaconOuterStyle**        | The beaconOuterStyle prop that allows defining system overrides as well as additional CSS styles\.    | \-                | beaconOuterStyle : \{\}                                                                                                                                                                 |
| **tooltipStyles**           | The tooltipStyles prop that allows defining system overrides as well as additional CSS styles\.       | \-                | tooltipStyles : \{\}                                                                                                                                                                    |
| **tooltipBgColor**          | The tooltipBgColor prop that allows to change background color                                        | \-                | linear\-gradient\(rgb\(255, 255, 255\), rgb\(255, 255, 255\)\);">                                                                                                                       |
| **tooltipContentStyle**     | The tooltipContentStyle prop that allows defining system overrides as well as additional CSS styles\. | \-                | tooltipContentStyle : \{\}                                                                                                                                                              |
| **buttonBackStyle**         |                                                                                                       | \-                | buttonBackStyle : \{\}                                                                                                                                                                  |
| **nextButtonStyle**         | The nextButtonStyle prop that allows defining system overrides as well as additional CSS styles\.     | \-                | nextButtonStyle : \{color : "dark"\}                                                                                                                                                    |
| **skipButtonStyle**         | The skipButtonStyle prop that allows defining system overrides as well as additional CSS styles\.     | \-                | skipButtonStyle : \{\}                                                                                                                                                                  |
| **skipButtonBgColor**       | The skipButtonBgColor prop that allows to change background color                                     | \-                | linear\-gradient\(rgb\(255, 255, 255\), rgb\(255, 255, 255\)\);">                                                                                                                       |
| **nextButtonBgColor**       | The nextButtonBgColor prop that allows to change background color                                     | \-                | linear\-gradient\(rgb\(255, 255, 255\), rgb\(255, 255, 255\)\);">                                                                                                                       |
| **overlayOutColor**         | The overlayOutColor prop that allows to change color                                                  | \-                | linear\-gradient\(rgb\(255, 255, 255\), rgb\(255, 255, 255\)\);">                                                                                                                       |
| **optionModalBgColor**      | The optionModalBgColor prop that allows to change background color                                    | \-                | linear\-gradient\(rgb\(255, 255, 255\), rgb\(255, 255, 255\)\);">                                                                                                                       |
| **optionModalTextColor**    | The optionModalTextColor prop that allows to change Text color                                        | \-                | linear\-gradient\(rgb\(255, 255, 255\), rgb\(255, 255, 255\)\);">                                                                                                                       |
| **optionModalArrowColor**   | The optionModalArrowColor prop that allows to change color                                            | \-                | linear\-gradient\(rgb\(255, 255, 255\), rgb\(255, 255, 255\)\);">                                                                                                                       |
| **optionModalPrimaryColor** | The optionModalPrimaryColor prop that allows to change primary color                                  | \-                | linear\-gradient\(rgb\(255, 255, 255\), rgb\(255, 255, 255\)\);">                                                                                                                       |
| **disableOverlay**          | To handle disable or enable overlay "true"\|""                                                        | \-                | True                                                                                                                                                                                    |
| **showProgress**            | To handle showProgress count in next button boolean                                                   |                   | True                                                                                                                                                                                    |
| **hideCloseButton**         | To handle hideCloseButton Show or not show boolean                                                    |                   | True                                                                                                                                                                                    |
| **scrollToFirstStep**       | boolean                                                                                               |                   | True                                                                                                                                                                                    |
| **spotlightPadding**        | To handle spotlightPadding padding in css number                                                      | 0                 |
| **callback**                | To handle callback event in next                                                                      | \-                | \-                                                                                                                                                                                      |
| **sx**                      | SxProps&lt;\{\}&gt;                                                                                   | \{ \}             | Set object                                                                                                                                                                              |
| **floaterProps**            | Props                                                                                                 | \-                | Set object                                                                                                                                                                              |
| **renderingComponent**      | any                                                                                                   | &lt;&gt;&lt;/&gt; | Set object                                                                                                                                                                              |
| **tooltipComponent**        | any                                                                                                   | &lt;&gt;&lt;/&gt; | Set object                                                                                                                                                                              |
| **stepsProps**              | Step\[\]                                                                                              | \[\]              | Set object                                                                                                                                                                              |
| **styleProps**              | StylesProps                                                                                           | \{ \}             | Set object                                                                                                                                                                              |
| **continuous**              | boolean                                                                                               |                   | Set boolean                                                                                                                                                                             |
| **run**                     | boolean                                                                                               |                   | Set boolean                                                                                                                                                                             |
| **spotlightClicks**         | boolean                                                                                               |                   | Set boolean                                                                                                                                                                             |
| **HandleCallBack**          | \(data: CallBackProps\) =&gt; void                                                                    | \(\) =&gt;        | \-                                                                                                                                                                                      |