DataToolbar

DataToolbar keeps search, view controls, and table actions aligned above data surfaces without adding another heavy card.

#Default usage

<DataToolbar>
  <SearchInput aria-label="Search packages" placeholder="Search packages..." />
  <SegmentedControl defaultValue="open" aria-label="Package state">
    <SegmentedControlItem value="open">Open</SegmentedControlItem>
    <SegmentedControlItem value="done">Done</SegmentedControlItem>
  </SegmentedControl>
  <Button variant="secondary">Export</Button>
  <Button>New package</Button>
</DataToolbar>

#Import

import {
  Button,
  DataToolbar,
  SearchInput,
  SegmentedControl,
  SegmentedControlItem,
} from "@froggdesign/enter-ui-react";

#Density

#Accessibility

DataToolbar is a layout container for data-surface actions. Ensure nested controls have labels and keep destructive or rarely used actions out of the primary rail when possible.

#API

• density: normal or compact.
• Supports native div props and className.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.