Burger

Usage

"use client";
import { useState } from "react";
import { Burger } from "@/ui/burger";
import { useDisclosure } from "@/hooks/use-disclosure";

function BurgerDemo() {
  const [opened, { toggle }] = useDisclosure();
  return <Burger open={opened} onClick={toggle} />;
}

Properties

Size

Color

API References

Styles API

Styles API	Type	Default	Annotation
unstyled`?`	`boolean`	`false`	if `true`, all default styles will be removed
size`?`	`string \| number`	`32`	Controls burger `width` and `height`, numbers are converted to rem
color`?`	`Colors`	`hsl(var(--color))`

Props API

Props API	Type	Default	Annotation
setOpen`?`	`(open: boolean) => void`	`undefined`	Set state of the burger
open`?`	`boolean`	`false`	State of the burger, when `true` burger is transformed

Source Codes

burger.tsx

Burger

Usage

"use client";
import { useState } from "react";
import { Burger } from "@/ui/burger";
import { useDisclosure } from "@/hooks/use-disclosure";

function BurgerDemo() {
  const [opened, { toggle }] = useDisclosure();
  return <Burger open={opened} onClick={toggle} />;
}

Properties

Size

Color

API References

Styles API

Styles API	Type	Default	Annotation
unstyled`?`	`boolean`	`false`	if `true`, all default styles will be removed
size`?`	`string \| number`	`32`	Controls burger `width` and `height`, numbers are converted to rem
color`?`	`Colors`	`hsl(var(--color))`

Props API

Props API	Type	Default	Annotation
setOpen`?`	`(open: boolean) => void`	`undefined`	Set state of the burger
open`?`	`boolean`	`false`	State of the burger, when `true` burger is transformed