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
density-size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
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";

const sizes = ["xs", "sm", "md", "lg", "xl"] as const;

export default function MacTrafficLightsSizeExample() {
  return (
    <div style={styles.stack}>
      {sizes.map((size) => (
        <MacTrafficLights
          key={size}
          aria-label={`${size} window controls`}
          density-size={size}
        />
      ))}
    </div>
  );
}

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