# Popover

> A non-modal panel anchored to a trigger.

## Examples

### Basic

```vue
<script setup lang="ts">
const toast = useToast();
const email = ref("");

function invite(close: () => void) {
  toast.success(`Invited ${email.value || "a teammate"}`);
  email.value = "";
  close();
}
</script>

<template>
  <UiPopover label="Invite a teammate">
    <template #trigger="{ attrs }">
      <UiButton variant="secondary" v-bind="attrs">
        <template #leading><Icon name="plus" :size="14" /></template>
        Invite
      </UiButton>
    </template>

    <template #default="{ close }">
      <form class="demo-popover" @submit.prevent="invite(close)">
        <UiInput v-model="email" type="email" label="Email" placeholder="ada@example.com" />
        <UiButton type="submit" size="small" full-width>Send invite</UiButton>
      </form>
    </template>
  </UiPopover>
</template>
```

## API

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` (required) | `string` | — | Accessible name for the panel (role="dialog"). |
| `align` | `"end" \| "start"` | `"start"` | Which trigger edge the panel lines up with. Flips automatically near the viewport edge. |
| `open` | `boolean` | `false` | Whether the panel is open. |

| Event | Payload | Description |
| --- | --- | --- |
| `update:open` | `[value: boolean]` | `v-model:open` update. |

| Slot | Props | Description |
| --- | --- | --- |
| `trigger` | `{ isOpen: boolean; attrs: Record<string, unknown>; }` | The trigger. Bind `attrs` to a `<button>`. |
| `default` | `{ close: () => void; }` | Panel content. Mounted on first open. |

## Styling

- Parts (`[data-part="…"]`): `popover-anchor`, `popover`
- State attributes: `data-popover-align`

## Keyboard

| Keys              | Action                                       |
| ----------------- | -------------------------------------------- |
| `Enter` / `Space` | Toggle                                       |
| `Escape`          | Close and return focus to the trigger        |
| `Tab`             | Move through the panel; leaving it closes it |

## Accessibility

- Focus moves into the panel on open.