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 [email protected]

Link

Story Book Link EmptyPage

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_fab-button

Import component

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

Usage

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

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'. |