Menu Icon B

Menu button icon.

Preview

closed

Code

import { useState } from "react"; import styles from "./menu-icon-b.module.css"; type Props = { className?: string; style?: React.CSSProperties; isOpen?: boolean; size?: "small" | "medium" | "large"; // Customized color or variant variant?: "default" | "style-a"; }; export default function MenuIconB({ className, isOpen = false, size, variant, }: Props) { return ( <div title="Menu" className={[ className, styles["wrapper"], styles[`s-${size}`], variant && styles[`c-${variant}`], isOpen ? styles.open : styles.closed, ].join(" ")} > <div className={styles.bars}> <div className={styles.bar1}></div> <div className={styles.bar2}></div> </div> </div> ); }

Design

Figma design file:

Documentation

Properties

Props of the component:

  • className (string): Specifies the CSS class of the component.
  • style (React.CSSProperties): Specifies the CSS properties of the component.
  • isOpen (boolean): Specified if the icon is in the open state by default.
  • size ("small" | "medium" | "large"): Specifies the size of the icon.
  • variant ("default" | "style-a" or a customized value): Specifies the color or theme variant of the component. See the "Sample CSS customization" below for an example of usage.
Sample CSS customization
.c-style-a{ --bar-height: 4px; --fg-color: #2e35ee; --border-color: transparent; }