Density

MacTrafficLights

MacTrafficLights renders the close, minimize, and zoom buttons used in macOS-style application chrome. Each button exposes an accessible label and an optional action callback.

import { MacTrafficLights } from "density-base-ui";

export default function MacTrafficLightsExample() {
  return <MacTrafficLights />;
}

Props

Prop Attribute Values Default
role role HTML role group
aria-label aria-label Accessible group label Window controls
size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
variant data-dn-mac-traffic-lights-variant color, gray color
closeLabel aria-label Close button accessible label Close
minimizeLabel aria-label Minimize button accessible label Minimize
zoomLabel aria-label Zoom button accessible label Zoom
onClose None Close button click handler None
onMinimize None Minimize button click handler None
onZoom None Zoom button click handler None
Other props Mixed HTML div props None

Size

import { MacTrafficLights } from "density-base-ui";

export default function MacTrafficLightsSizeExample() {
  return (
    <div style={styles.stack}>
      <MacTrafficLights aria-label="2xs window controls" size="2xs" />
      <MacTrafficLights aria-label="xs window controls" size="xs" />
      <MacTrafficLights aria-label="sm window controls" size="sm" />
      <MacTrafficLights aria-label="md window controls" size="md" />
      <MacTrafficLights aria-label="lg window controls" size="lg" />
      <MacTrafficLights aria-label="xl window controls" size="xl" />
      <MacTrafficLights aria-label="2xl window controls" size="2xl" />
      <MacTrafficLights aria-label="3xl window controls" size="3xl" />
    </div>
  );
}

const styles = {
  stack: {
    alignItems: "center",
    display: "flex",
    flexWrap: "wrap",
    gap: "0.75rem",
  },
} as const;

Variant

import { MacTrafficLights } from "density-base-ui";

export default function MacTrafficLightsVariantExample() {
  return (
    <div style={styles.row}>
      <MacTrafficLights aria-label="Color window controls" variant="color" />
      <MacTrafficLights aria-label="Gray window controls" variant="gray" />
    </div>
  );
}

const styles = {
  row: { alignItems: "center", display: "flex", gap: "1.5rem" },
} as const;