Navigation

Popover

A floating overlay anchored to a trigger, for short content or small forms.

<script>
  import { Popover, Button } from "@codeatlasdev/ui";
</script>

<Popover side="bottom" align="start">
  {#snippet triggerChild(props)}<Button {...props}>Open</Button>{/snippet}
  Popover content
</Popover>

Built on the Bits UI Popover: Escape closes it, a click outside dismisses it and focus returns to the trigger. Pass an interactive trigger through triggerChild and spread the received props on it; use trigger only for non-interactive content. For a hint that appears on hover, use Tooltip instead.

Basic

Text and an action inside the popover.

Code

<script lang="ts">
  import { Popover, Button, Stack } from '@codeatlasdev/ui';
</script>

<Popover>
  {#snippet triggerChild(props)}<Button {...props}>Open popover</Button>{/snippet}
  <Stack gap={12}>
    <p class="text">This is a basic popover with some content inside.</p>
    <Button size="sm" variant="filled">Confirm</Button>
  </Stack>
</Popover>

<style>
  .text { margin: 0; font-size: var(--ca-font-size-body2); color: var(--ca-text-secondary); }
</style>

Form

A small form anchored to its trigger, aligned to the start.

Code

<script lang="ts">
  import { Popover, Button, TextField, Stack, Row } from '@codeatlasdev/ui';
</script>

<Popover side="bottom" align="start">
  {#snippet triggerChild(props)}<Button variant="filled" {...props}>Edit label</Button>{/snippet}
  <Stack gap={12}>
    <TextField label="Label name" placeholder="e.g. Priority" />
    <Row gap={8} justify="flex-end">
      <Button size="sm" variant="ghost">Cancel</Button>
      <Button size="sm" variant="filled">Save</Button>
    </Row>
  </Stack>
</Popover>

Props

Prop	Type	Default	Description
`triggerChild`	`Snippet<[Record<string, unknown>]>`	–	Interactive trigger. Receives the trigger props to spread onto your Button or IconButton.
`trigger`	`Snippet`	–	Non-interactive trigger content (text, icon), wrapped in the popover's own button.
`children`	`Snippet`	–	Popover content.
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	Preferred side of the trigger.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Alignment against the trigger.
`sideOffset`	`number`	`8`	Distance from the trigger in pixels.
`class`	`string`	`''`	Extra CSS classes on the content.