SavedViews

SavedViews represents named filter or table states such as All, Draft, Needs review, and Archived. The visual treatment is intentionally quiet so it can sit above dense product surfaces.

#Default usage

<SavedViews
  defaultValue="all"
  views={[
    { id: "all", label: "All", count: 48 },
    { id: "draft", label: "Draft", count: 9 },
    { id: "review", label: "Needs review", count: 6, dirty: true },
    { id: "locked", label: "Published", count: 33, locked: true },
  ]}
/>

#Import

import {
  SavedViewItem,
  SavedViews,
  SavedViewTabs,
} from "@froggdesign/enter-ui-react";

#Controlled

<SavedViewTabs
  value={view}
  onValueChange={setView}
  onCreateView={createView}
  onRenameView={renameView}
  onDeleteView={deleteView}
  views={views}
/>

#Patterns

Use SavedViews above tables, inboxes, moderation queues, billing lists, and dashboards where the active data state should feel persistent.

#Accessibility

The control renders a labelled navigation region with buttons. The active view exposes aria-current="page". Locked views are disabled and cannot be selected or renamed/deleted through the built-in action buttons.

#API

• views: { id, label, count?, dirty?, locked? }[].
• value: controlled active view id.
• defaultValue: initial active view id.
• onValueChange: called when a view is selected.
• onCreateView, onRenameView, onDeleteView: optional view management actions.

#Styling

SavedViews uses .eui-saved-views classes and FroggDesign tokens for layout, state, focus, and disabled styling.