Density

Toggle

Toggle wraps Base UI’s toggle button with Density’s shared control attributes.

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

export default function ToggleExample() {
  return (
    <Toggle defaultPressed aria-label="Pin panel">
      Pin
    </Toggle>
  );
}

Props

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