Storybook stories for the `PageActions` UI component, covering all layout variants, responsive behaviors, and interactive states. ## Key Components ### Stories | Story | Variant | Description | |---|---|---| | `IconButtons` | `icon-buttons` | Icon-labeled buttons; collapses to dropdown on mobile | | `PrimaryButtons` | `primary-buttons` | Accent + outline buttons; fixed bottom bar on mobile | | `PrimaryButtonsWithIcons` | `primary-buttons` | Primary buttons with leading icons | | `SinglePrimaryButton` | `primary-buttons` | Single accent button | | `SingleIconButton` | `icon-buttons` | Single icon button (no dropdown collapse on mobile) | | `ThreeIconButtons` | `icon-buttons` | Three icon buttons | | `WithStates` | `primary-buttons` | Loading and disabled button states | | `MenuPrimary` | `menu-primary` | `...` dropdown menu + primary button | | `MenuPrimaryLoading` | `menu-primary` | Primary button in loading state | | `MobileOnlyActions` | `icon-buttons` | Actions hidden on desktop via `showOnlyMobile` | | `LinkActions` | `menu-primary` | Actions rendered as Next.js `` via `href` | | `SplitButtonWithMenu` | `menu-primary` | Primary button with chevron submenu | | `SplitButtonTwoActions` | `menu-primary` | Two independently clickable button halves via `iconAction` | ## Usage Example ```typescript import { PageActions } from '../components/ui/page-actions' import { PlusCircleIcon, PlayCircleIcon, PenEditIcon } from '../components/icons-v2-generated' // icon-buttons variant (e.g. list pages) }, ]} /> // menu-primary variant with split button and submenu }, ], }, ]} menuActions={[ { items: [ { id: 'edit', label: 'Edit Device', onClick: handleEdit, icon: }, ], }, ]} /> ``` Pair with `PageContainer`'s `headerActions` prop for consistent page-level layouts. See the full source at [`PageActions.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/PageActions.stories.tsx).