UI Component Code Gallery for React - by Mirado Andria

Menu Icon C

Menu button icon.

Preview

closed

Code

import { useState } from "react";
import styles from "./menu-icon-c.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 MenuIconC({
  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 className={styles.bar3}></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;
}