Action Button

The Action Button component is a compact and interactive menu toggle button, ideal for responsive navigation. It offers a toggleable design with smooth animations, making it a versatile choice for modern web applications.

Usage

Follow the steps below to add the Action Button Component to your project.

Add the import statement for the component

import ActionButton from "@/components/elixir-ui/action-button";

Add the useState hook to the component

const [isActive, setIsActive] = useState(false);

Import the component in your project and use it

<div className="flex h-full w-full items-center justify-center">
  <ActionButton isActive={isActive} setIsActive={setIsActive} />
</div>

Props

Prop	Type	Default	Description
isActive	boolean	false	Controls the visibility of the Action Button
setIsActive	() => void	-	Callback function when toggle button is clicked