npm package: @licuido-ui/ui_fab-button
Description: FabButton is a customizable Floating Action Button component for React applications. It allows you to create a floating button with optional speed dial actions that can be triggered by either click or hover events.
Latest version: 0.0.2

# FabButton

FabButton is a customizable Floating Action Button component for React applications. It allows you to create a floating button with optional speed dial actions that can be triggered by either click or hover events.

### Author

- @author Akila k <akila@crayond.co>

## Link

[Story Book Link EmptyPage](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_fab-button
```

## Import component

```jsx
import { FabButton } from '@licuido-ui/ui_fab-button';
```

## Usage

```jsx
import { FabButton } from '@licuido-ui/ui_fab-button';

const actionsData = [
  { name: 'Action 1', icon: <IconComponent />, onClick: (position) => handleAction1(position) },
  { name: 'Action 2', icon: <IconComponent />, onClick: (position) => handleAction2(position) },
  // Add more actions as needed.
];

function MyComponent() {
  return (
    <FabButton
      direction='up'
      radius={100}
      semicircle={false}
      actionsData={actionsData}
      isOpen={false}
      variant='clickable'
      onToggle={() => console.log('Speed dial toggled')}
      onMainButtonClick={() => console.log('Main button clicked')}
      openIcon={<OpenIconComponent />}
      closeIcon={<CloseIconComponent />}
    />
  );
}
```

## Image

![alt text](./fabButton.png)
![alt text](./fabSemiCircle.png)

## Props

| Name              | Type          | Default     | Description                                                                              |
| ----------------- | ------------- | ----------- | ---------------------------------------------------------------------------------------- |
| className         | string        | ''          | Additional class name to apply to the FabButton component.                               |
| sx                | SxProps       | {}          | Custom styles using the Material-UI sx prop.                                             |
| direction         | string        | 'up'        | The direction in which the speed dial actions will be displayed (left, right, up, down). |
| radius            | number        | 100         | The radius (distance) from the main button to the speed dial actions.                    |
| semicircle        | boolean       | false       | If true, the speed dial actions will be displayed in a semicircle layout.                |
| actionsData       | ActionData[]  | []          | An array of action data objects, each representing a speed dial action.                  |
| buttonStyle       | CSSProperties | {}          | Custom styles for the main button.                                                       |
| actionButtonStyle | CSSProperties | {}          | Custom styles for each speed dial action button.                                         |
| directionStyle    | CSSProperties | {}          | Custom styles for the FabButton's direction container.                                   |
| buttonConStyle    | CSSProperties | {}          | Custom styles for the container of the main button and speed dial actions.               |
| closeIcon         | ReactNode     | `<></>`     | The custom React node to be used as the close icon for the speed dial.                   |
| isOpen            | boolean       | false       | The current open/close state of the speed dial.                                          |
| openIcon          | ReactNode     |             | The custom React node to be used as the open icon for the speed dial.                    |
| onToggle          | () => void    | () => {}    | Callback function to handle the open/close state change of the speed dial.               |
| onMainButtonClick | () => void    | () => {}    | Callback function to handle the click on the main button.                                |
| variant           | string        | 'clickable' | The behavior of the FabButton, can be 'hoverable' or 'clickable'.                        |