@licuido-ui/ui_fab-button

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 [e-mail]

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