DensityToggle

DensityToggle gives tables and lists a shared control for row spacing without creating another custom toggle per surface.

#Default usage

<DensityToggle defaultValue="comfortable" />

#Import

import { DensityToggle } from "@froggdesign/enter-ui-react";

#Controlled

<DensityToggle
  value={density}
  onValueChange={setDensity}
/>

#Patterns

Use this in table settings, resource lists, and admin queues where users switch between scannability and information density.

#Accessibility

DensityToggle reuses SegmentedControl, exposing radio group semantics and keyboard-operable buttons.

#API

• value: controlled comfortable or compact.
• defaultValue: initial density. Defaults to comfortable.
• onValueChange: called with the next density.
• disabled: disables both options.

#Styling

DensityToggle uses .eui-density-toggle classes and FroggDesign tokens for layout, state, focus, and disabled styling.