### Button Plugin

There are two types of buttons

1. Link Button - basically a link in a shape of a button.
2. Action Button - by passing an `onClick` prop callback, when clicking the button it triggers the
`onClick` action.

#### Usage

##### Editor

```tsx widget
import { pluginActionButton, pluginLinkButton, RicosEditor } from '@wix/ricos';
import React from 'react';

export default () => {
  return (
    // @essential-start
    <RicosEditor
      placeholder={'Add link or action button'}
      plugins={[pluginLinkButton(), pluginActionButton()]}
    />
    // @essential-end
  );
};
```

##### Viewer

```tsx widget
import '@wix/ricos/css/plugin-button-viewer.global.css';
import '@wix/ricos/css/ricos-viewer.global.css';
import type { RichContent } from '@wix/ricos';
import { pluginActionButtonViewer, pluginLinkButtonViewer, RicosViewer } from '@wix/ricos';
import React from 'react';

export default () => {
  return (
    // @essential-start
    <RicosViewer
      content={content}
      plugins={[pluginLinkButtonViewer(), pluginActionButtonViewer()]}
    />
    // @essential-end
  );
};

const content = {
  nodes: [
    {
      type: 'BUTTON',
      id: 'puer621',
      buttonData: {
        containerData: {
          width: {
            size: 'ORIGINAL',
          },
          alignment: 'CENTER',
          spoiler: {},
          height: {},
          textWrap: true,
        },
        type: 'LINK',
        styles: {},
        text: 'Link button',
        link: {
          url: 'https://ricos.dev',
          target: 'BLANK',
          rel: {
            nofollow: true,
            sponsored: false,
          },
        },
      },
    },
    {
      type: 'PARAGRAPH',
      id: '0bkal481',
    },
    {
      type: 'BUTTON',
      id: 'e65qp515',
      buttonData: {
        containerData: {
          width: {
            size: 'ORIGINAL',
          },
          alignment: 'CENTER',
          spoiler: {},
          height: {},
          textWrap: true,
        },
        type: 'ACTION',
        styles: {},
        text: 'Action button',
      },
    },
    {
      type: 'PARAGRAPH',
      id: 'rqftp516',
    },
  ],
} as RichContent;
```

#### Link & Action Button Config API

##### `colors`

Control Button colors

```jsx
colors?: {
  color1?: string,
  color2?: string,
  color3?: string,
  ...
  `color${Number}?`: string,
}
```

Example value:

```jsx
colors = {
  color1: '#FEFDFD',
  color2: '#D5D4D4',
  color3: '#000000',
  color4: '#000000',
  color5: '#000000',
  color6: '#ABCAFF',
  color7: '#81B0FF',
  color8: '#0261FF',
  color9: '#0141AA',
  color10: '#012055',
};
```

##### `onTextColorAdded`

```jsx
onTextColorAdded: (color: string) => string[]
```

A function that receives a color and returns user text colors.

##### `onBackgroundColorAdded`

```jsx
onBackgroundColorAdded: (color: string) => string[]
```

A function that receives a color and returns user background colors.

##### `onBorderColorAdded`

```jsx
onBorderColorAdded: (color: string) => string[]
```

A function that receives a color and returns user border colors.

##### `getTextColors`

```jsx
getTextColors: () => string[]
```

A function that returns user text colors.

##### `getBorderColors`

```jsx
getBorderColors: () => string[]
```

A function that returns user border colors.

##### `getBackgroundColors`

```jsx
getBackgroundColors: () => string[]
```

A function that returns user background colors.

#### Action Button Config API

##### `onClick`

```jsx
onClick: () => void
```

A function that is triggered when clicking the button, it will trigger the `onClick` action.
