Popover

A small panel next to its trigger.

popover.example.svelte

<script lang="ts">
  import { Checkbox, Popover } from '@onlywin/ui-svelte';
</script>

<Popover label="Filters" icon="filter" title="Show games">
  <div class="example-stack">
    <Checkbox label="Demo" checked />
    <Checkbox label="Real money" checked />
    <Checkbox label="Brand games" />
  </div>
</Popover>

Usage

Do

Use it for filters and small settings next to their trigger.

Don’t

Do not use it for content the reader must act on; use Modal.

Accessibility

The trigger has aria-expanded and aria-haspopup; the panel is a labelled non-modal dialog that takes focus.

Keyboard

Popover keyboard interactions
Keys	Action
`Enter, Space`	Activate
`Escape`	Close and return focus

Props

The same props in both frameworks. In React, class is className, events are camelCase (onClick), content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use, and elementRef reaches the DOM element.

Popover props
Prop	Type	Default	Description
`children` *required	`Snippet`	—
`icon`	`TUiIconName`	—	The trigger button's icon.
`label` *required	`string`	—	The trigger button's text.
`onOpenChange`	`(open: boolean) => void`	—
`open`	`boolean`	`false`	Bindable in Svelte; `defaultOpen` in React.
`title`	`string`	—
`variant`	`'ghost' \| 'primary' \| 'secondary'`	`'secondary'`