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, Toolbar } from "density-base-ui";

export default function MacTrafficLightsExample() {
  return (
    <Toolbar depth="4" padding={true} childrenStart={<MacTrafficLights />} />
  );
}

Variant

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

export default function MacTrafficLightsVariantExample() {
  return (
    <>
      <Toolbar
        depth="4"
        padding={true}
        childrenStart={
          <MacTrafficLights
            aria-label="Color window controls"
            variant="color"
          />
        }
      />
      <Toolbar
        depth="4"
        padding={true}
        childrenStart={
          <MacTrafficLights aria-label="Gray window controls" variant="gray" />
        }
      />
    </>
  );
}