MenuButton

layout

An animated hamburger menu toggle button. Used internally by Header but available standalone for custom mobile navigation patterns.

Click to open

1Installation

Install the package:

$npm install piece-ui

Import the component:

tsx

1import { MenuButton } from "piece-ui";

2Usage

Basic usage

tsx

1import { useState } from "react";
2import { MenuButton } from "piece-ui";
3
4export default function Example() {
5  const [open, setOpen] = useState(false);
6
7  return (
8    <MenuButton
9      isOpen={open}
10      onClick={() => setOpen(!open)}
11      color="#00f0ff"
12    />
13  );
14}

3Props

Prop	Type	Default	Description
`isOpen`req	`boolean`	—	Controls the open/closed animation state.
`onClick`req	`() => void`	—	Toggle handler.
`color`	`string`	—	Icon color.

Header

NoiseBackground