Menu Item

A selectable row for menus and dropdowns. Built from two Figma components in sequence: the Menu Item (Default / Hover states, optional icon) and the Menu Dropdown (a bordered list container). All values pulled directly from the LUSTER Figma variables.

State (Variant)

Icon

Figma Properties
State: Default
Background: #FFFFFF
Text / Icon: #24242C
Padding: 12px 16px
Gap: 8px · Font: Inter 400 / 16px

Component · Menu Item

A single row with a label and an optional trailing icon. Two states: Default (white) and Hover (light purple #F2EDFF).

Default

Hover

Component · Menu Dropdown

A bordered container stacking menu items with dividers. Hover any row to see the Hover state. Border: 2px #F2EDFF.

Design Tokens

Token names mirror the LUSTER Figma variable paths one-to-one. Values shown are the Diamond brand, Light mode defaults (the Figma file's default mode). Other brands (Amber, Opal) and Dark mode resolve to different values via the Color Theme & Component Brand collections.

Token Name	Figma Variable	Default Value
--menuItemDefaultBgColor	menuItem/default/bg/color	#FFFFFF
--menuItemDefaultFontColor	menuItem/default/font/color	#24242C
--menuItemDefaultIconColor	menuItem/default/icon/color	#24242C
--menuItemHoverBgColor	menuItem/hover/bg/color	#F2EDFF
--menuItemHoverFontColor	menuItem/hover/font/color	#24242C
--menuItemHoverIconColor	menuItem/hover/icon/color	#24242C
--menuItemGap	menuItem/gap	8px
--menuItemPaddingX	menuItem/padding/x	16px
--menuItemPaddingY	menuItem/padding/y	12px
--menuItemBorderRadius	menuItem/border/radius	0px
--menuDropdownBgColor	menuDropdown/bg/color	#FFFFFF
--menuDropdownBorderColor	menuDropdown/border/color	#F2EDFF
--menuDropdownBorderWidth	menuDropdown/border/width	2px
--menuDropdownBorderRadius	menuDropdown/border/radius	0px
--bodyFontSize	typography/body/font/size	16px
--bodyFontLineHeight	typography/body/font/lineHeight	19px
--bodyFontWeight	typography/body/font/weight	400
--bodyFontFamily	body/font/family	Inter

Usage Guidelines

✓ DO

Use the Hover state to give clear feedback on the focused row.

✓ DO

Keep menu labels short; add a trailing icon only when it adds meaning.

✗ DON'T

Don't mix wildly different row heights inside one dropdown.

✗ DON'T

Don't use menu items for primary page actions — use Buttons.

Implementation

Values shown are the Diamond brand, Light mode defaults (the Figma file's default mode). Other brands (Amber, Opal) and Dark mode resolve to different values via the Color Theme & Component Brand collections.

import './MenuItem.css';

export interface MenuItemProps {
  label: string;
  icon?: React.ReactNode;
  onClick?: () => void;
}

export const MenuItem = ({ label, icon, onClick }: MenuItemProps) => (
  <button type="button" className="menu-item" role="menuitem" onClick={onClick}>
    <span className="menu-item__label">{label}</span>
    {icon && <span className="menu-item__icon">{icon}</span>}
  </button>
);

export const MenuDropdown = ({ children }) => (
  <div className="menu-dropdown" role="menu">{children}</div>
);

/* Menu Item & Menu Dropdown tokens — Diamond brand, Light mode */
:root {
  /* menuItem — Component Brand */
  --menuItemDefaultBgColor: #FFFFFF;   /* background/section */
  --menuItemDefaultFontColor: #24242C; /* foreground/on surface */
  --menuItemDefaultIconColor: #24242C; /* foreground/on surface */
  --menuItemHoverBgColor: #F2EDFF;     /* background/info */
  --menuItemHoverFontColor: #24242C;   /* foreground/on surface */
  --menuItemHoverIconColor: #24242C;   /* foreground/on surface */
  /* menuItem — Component Density */
  --menuItemGap: 8px;                  /* Spacing/3xl */
  --menuItemPaddingX: 16px;            /* Spacing/5xl */
  --menuItemPaddingY: 12px;            /* Spacing/4xl */
  --menuItemBorderRadius: 0px;
  /* menuDropdown */
  --menuDropdownBgColor: #FFFFFF;      /* background/section */
  --menuDropdownBorderColor: #F2EDFF;  /* border/default */
  --menuDropdownBorderWidth: 2px;      /* border/width/lg */
  --menuDropdownBorderRadius: 0px;
  /* Typography — Body */
  --bodyFontSize: 16px;
  --bodyFontLineHeight: 19px;
  --bodyFontWeight: 400;
  --bodyFontFamily: 'Inter', sans-serif;
}

.menu-item {
  display: flex; align-items: center; gap: var(--menuItemGap);
  padding: var(--menuItemPaddingY) var(--menuItemPaddingX);
  background: var(--menuItemDefaultBgColor);
  color: var(--menuItemDefaultFontColor);
  font-family: var(--bodyFontFamily);
  font-size: var(--bodyFontSize);
  line-height: var(--bodyFontLineHeight);
  font-weight: var(--bodyFontWeight);
  border: none; width: 100%; cursor: pointer;
  border-radius: var(--menuItemBorderRadius);
  transition: background 0.15s ease;
}
.menu-item__label { flex: 1; text-align: left; }
.menu-item__icon { color: var(--menuItemDefaultIconColor); }
.menu-item:hover {
  background: var(--menuItemHoverBgColor);
  color: var(--menuItemHoverFontColor);
}
.menu-item:hover .menu-item__icon { color: var(--menuItemHoverIconColor); }

.menu-dropdown {
  background: var(--menuDropdownBgColor);
  border: var(--menuDropdownBorderWidth) solid var(--menuDropdownBorderColor);
  border-radius: var(--menuDropdownBorderRadius);
  overflow: hidden;
}
.menu-dropdown .menu-item { border-bottom: 1px solid var(--menuDropdownBorderColor); }
.menu-dropdown .menu-item:last-child { border-bottom: none; }

<div class="menu-dropdown" role="menu">
  <button class="menu-item" role="menuitem"><span class="menu-item__label">About</span></button>
  <button class="menu-item" role="menuitem"><span class="menu-item__label">Contact</span></button>
  <button class="menu-item" role="menuitem"><span class="menu-item__label">Settings</span></button>
</div>

import { MenuDropdown, MenuItem } from '@luster/ui';

export default function AccountMenu() {
  return (
    <MenuDropdown>
      <MenuItem label="About" onClick={() => go('/about')} />
      <MenuItem label="Contact" onClick={() => go('/contact')} />
      <MenuItem label="Settings" onClick={() => go('/settings')} />
    </MenuDropdown>
  );
}