Density

Switch

Switch composes Base UI’s switch root and thumb with Density control attributes on the root.

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

export default function SwitchExample() {
  return (
    <label>
      <Switch.Root defaultChecked>
        <Switch.Thumb />
      </Switch.Root>
      Enable notifications
    </label>
  );
}

Props

Prop Attribute Values Default
Switch.Root density-presentation data-dn-presentation button button
Switch.Root density-emphasis data-dn-emphasis primary, secondary, outline, ghost secondary
Switch.Root density-size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
Switch.Root, Switch.Thumb Mixed Base UI switch props None