@payfit/unity-components/skills/unity-overlays/references/patterns.md

# Unity overlay patterns

### Dialog with DialogTrigger + DialogActions

```tsx
import {
  Button,
  Dialog,
  DialogActions,
  DialogButton,
  DialogContent,
  DialogTitle,
  DialogTrigger,
} from '@payfit/unity-components'

export function ArchiveDialog({ onArchive }: { onArchive: () => void }) {
  return (
    <DialogTrigger>
      <Button>Archive</Button>
      <Dialog size="md">
        <DialogTitle>Archive this employee?</DialogTitle>
        <DialogContent>
          They will no longer appear in active lists. You can restore them
          later.
        </DialogContent>
        <DialogActions>
          <DialogButton variant="close">Cancel</DialogButton>
          <DialogButton variant="confirm" onPress={onArchive}>
            Archive
          </DialogButton>
        </DialogActions>
      </Dialog>
    </DialogTrigger>
  )
}
```

### SidePanel for detail views

```tsx
import { useState } from 'react'

import {
  Button,
  SidePanel,
  SidePanelContent,
  SidePanelFooter,
  SidePanelHeader,
} from '@payfit/unity-components'

export function EmployeeDetailPanel({ employee }: { employee: Employee }) {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <Button onPress={() => setIsOpen(true)}>View details</Button>
      <SidePanel isOpen={isOpen} onOpenChange={setIsOpen}>
        <SidePanelHeader>{employee.name}</SidePanelHeader>
        <SidePanelContent>
          <p>{employee.position}</p>
          <p>{employee.team}</p>
        </SidePanelContent>
        <SidePanelFooter>
          <Button variant="secondary" onPress={() => setIsOpen(false)}>
            Close
          </Button>
        </SidePanelFooter>
      </SidePanel>
    </>
  )
}
```

### Popover for interactive informational content

`title` is required (use `isTitleSrOnly` if you don't want it visible).
Children may be focusable; the Popover is non-modal so the page stays
interactive behind it.

```tsx
import { Button, Popover, PopoverTrigger } from '@payfit/unity-components'

export function HelpPopover() {
  return (
    <PopoverTrigger>
      <Button variant="tertiary">What is a working agreement?</Button>
      <Popover title="Working agreement">
        <p>
          A working agreement defines when, where and how an employee works. See
          the <a href="/handbook/working-agreement">handbook</a> for details.
        </p>
      </Popover>
    </PopoverTrigger>
  )
}
```

### Menu for action lists

`Menu` expects exactly two children: a trigger and a content block. Use
`MenuTrigger` / `MenuContent` / `RawMenuItem` for the standard composition.

```tsx
import {
  IconButton,
  Menu,
  MenuContent,
  MenuTrigger,
  RawMenuItem,
} from '@payfit/unity-components'

export function RowActions({
  onEdit,
  onArchive,
}: {
  onEdit: () => void
  onArchive: () => void
}) {
  return (
    <Menu>
      <MenuTrigger>
        <IconButton icon="MoreFilled" title="Actions" />
      </MenuTrigger>
      <MenuContent>
        <RawMenuItem onAction={onEdit}>Edit</RawMenuItem>
        <RawMenuItem onAction={onArchive}>Archive</RawMenuItem>
      </MenuContent>
    </Menu>
  )
}
```