PopoverButton

This documentation is currently being revised and is in beta status. Content may still change.

This component is being retested for accessibility. The full test is still pending and can only be completed after a release.

Synonyms: Popover Menu, Overlay Menu, Context Button

Description: The PopoverButton combines a button with an associated popover overlay that is shown and hidden on click. The popover uses the native HTML Popover API for lightweight, non-modal overlaying of arbitrary content. The button controls the visibility of the popover via click, while the position can be configured flexibly.

Example

Example of a PopoverButton with sample content inside the popover:

Password requirements

Minimum 8 characters
Upper and lowercase letters (A–Z, a–z)
At least one number (0–9)
At least one special character (e.g. !@#$%)

<KolPopoverButton _label="Password help" ><strong>Password requirements</strong><ul><li>Minimum 8 characters</li><li>Upper and lowercase letters (A–Z, a–z)</li><li>At least one number (0–9)</li><li>At least one special character (e.g. !@#$%)</li></ul></KolPopoverButton>

Accessibility

Focus management: The popover is rendered as a native HTML Popover, which enables automatic focus handling. The button retains its focus state after closing.
Label requirement: The _label attribute is required and provides the semantic label for the button. This is used as aria-label for screen readers.
Keyboard control: The PopoverButton is fully operable via keyboard and supports standard button shortcuts.
Semantic structure: The popover is provided with correct ARIA structure for non-modal overlays.

Links and References

Usage

Keyboard Control

Key	Function
`Tab`	Focuses the button or moves to the next interactive element.
`Shift + Tab`	Moves to the previous interactive element.
`Enter`	Activates the button and shows or hides the popover.
`Space`	Alternative activation of the button (shows or hides the popover).

Best Practices / Recommendations

Meaningful labels: Use clear button labels that clearly indicate the purpose or consequence of the click (e.g. "Options", "Menu", "Filter").
Contextual positioning: Use _popoverAlign to position the popover sensibly. A downward-facing popover is standard; upward-facing popovers are useful when little space is available below.
Limit content: Popovers should not contain extensive content. For more complex dialogs, use the .
Clear close state: The button visually indicates whether the popover is open. Make sure users understand this.
Click-outside behavior: The native Popover API automatically closes the popover when clicking outside (default behavior).
No nesting: Avoid nested popovers or multiple simultaneously open popovers.

Use Cases

Context menus: Action menus next to or above elements (Edit, Delete, More options).
Filter or sort options: Compact option areas in a table or list.
Additional information: Tooltips with interactive content, help hints.
Quick actions: Frequent actions on or next to elements without an additional page.
Settings or configuration: Quick settings for an element or component.

Construction / Technical

Playground

Test the various properties of the PopoverButton:

Password requirements

Minimum 8 characters
Upper and lowercase letters (A–Z, a–z)
At least one number (0–9)
At least one special character (e.g. !@#$%)

Popover Align

Variant

Icons

<KolPopoverButton _label="Password help" ><strong>Password requirements</strong><ul><li>Minimum 8 characters</li><li>Upper and lowercase letters (A–Z, a–z)</li><li>At least one number (0–9)</li><li>At least one special character (e.g. !@#$%)</li></ul></KolPopoverButton>

Functionality

Basic Button Properties

The PopoverButton supports the standard button attributes:

Password requirements

Minimum 8 characters
Upper and lowercase letters (A–Z, a–z)
At least one number (0–9)
At least one special character (e.g. !@#$%)

<KolPopoverButton _label="Button" ><strong>Password requirements</strong><ul><li>Minimum 8 characters</li><li>Upper and lowercase letters (A–Z, a–z)</li><li>At least one number (0–9)</li><li>At least one special character (e.g. !@#$%)</li></ul></KolPopoverButton>

Available attributes:

_label: Visible or semantic label of the button
_hideLabel: Hides the label visually but keeps it visible for screen readers
_disabled: Disables the button (interaction not possible)
_type: Button type (button, submit, reset)

Button Variants and Styling

The PopoverButton supports various visual variants:

Password requirements

Minimum 8 characters
Upper and lowercase letters (A–Z, a–z)
At least one number (0–9)
At least one special character (e.g. !@#$%)

Tooltip Align

Variant

Icons

<KolPopoverButton _label="Styled Button" ><strong>Password requirements</strong><ul><li>Minimum 8 characters</li><li>Upper and lowercase letters (A–Z, a–z)</li><li>At least one number (0–9)</li><li>At least one special character (e.g. !@#$%)</li></ul></KolPopoverButton>

Available attributes:

_variant: Visual style (normal, primary, secondary, tertiary, danger, ghost, custom)
_customClass: Custom CSS class when _variant="custom" is set
_icons: Icon class names for icon fonts (e.g. Font Awesome)
_inline: Displays the component inline without a minimum size of 44px
_tooltipAlign: Preferred position of the tooltip (top, right, bottom, left)

The position of the popover relative to the button can be controlled:

Password requirements

Minimum 8 characters
Upper and lowercase letters (A–Z, a–z)
At least one number (0–9)
At least one special character (e.g. !@#$%)

Popover Align

<KolPopoverButton _label="Position" _popoverAlign="bottom" ><strong>Password requirements</strong><ul><li>Minimum 8 characters</li><li>Upper and lowercase letters (A–Z, a–z)</li><li>At least one number (0–9)</li><li>At least one special character (e.g. !@#$%)</li></ul></KolPopoverButton>

Available positions:

bottom: Below the button (default)
top: Above the button
left: To the left of the button
right: To the right of the button

The popover content is provided via the default slot:

Option 1
Option 2
Option 3

<KolPopoverButton _label="Menu" ><ul style='margin:0; padding:0; list-style:none;'><li style='padding:8px;'><strong>Option 1</strong></li><li style='padding:8px;'><strong>Option 2</strong></li><li style='padding:8px;'><strong>Option 3</strong></li></ul></KolPopoverButton>

Note: The slot content is processed with HTML sanitization for security. The content should remain concise and focused.

Shortcuts and Focus

The PopoverButton supports accessibility features for extended keyboard interaction:

Password requirements

Minimum 8 characters
Upper and lowercase letters (A–Z, a–z)
At least one number (0–9)
At least one special character (e.g. !@#$%)

<KolPopoverButton _label="Alt+O" ><strong>Password requirements</strong><ul><li>Minimum 8 characters</li><li>Upper and lowercase letters (A–Z, a–z)</li><li>At least one number (0–9)</li><li>At least one special character (e.g. !@#$%)</li></ul></KolPopoverButton>

Available attributes:

_accessKey: Key combination for quick activation (e.g. "o" for Alt+O)
_tabIndex: Tab order in the form
_shortKey: Visual display of the shortcut in the button label

API

Overview

A button that toggles the visibility of a popover overlay containing arbitrary content. The popover uses the native HTML Popover API for lightweight, non-modal overlays.

Properties

Property	Attribute	Description	Type	Default
`_accessKey`	`_access-key`	Defines the key combination that can be used to trigger or focus the component's interactive element.	`string \| undefined`	`undefined`
`_ariaDescription`	`_aria-description`	Defines the value for the aria-description attribute.	`string \| undefined`	`undefined`
`_customClass`	`_custom-class`	Defines the custom class attribute if _variant="custom" is set.	`string \| undefined`	`undefined`
`_disabled`	`_disabled`	Makes the element not focusable and ignore all events.	`boolean \| undefined`	`false`
`_hideLabel`	`_hide-label`	Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.	`boolean \| undefined`	`false`
`_icons`	`_icons`	Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).	`KoliBriHorizontalIcons & KoliBriVerticalIcons \| string \| undefined`	`undefined`
`_inline`	`_inline`	Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.	`boolean \| undefined`	`false`
`_label` (required)	`_label`	Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.	`string`	`undefined`
`_name`	`_name`	Defines the technical name of an input field.	`string \| undefined`	`undefined`
`_popoverAlign`	`_popover-align`	Defines where to show the Popover preferably: top, right, bottom or left.	`"bottom" \| "left" \| "right" \| "top" \| undefined`	`'bottom'`
`_shortKey`	`_short-key`	Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.	`string \| undefined`	`undefined`
`_tabIndex`	`_tab-index`	Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)	`number \| undefined`	`undefined`
`_tooltipAlign`	`_tooltip-align`	Defines where to show the Tooltip preferably: top, right, bottom or left.	`"bottom" \| "left" \| "right" \| "top" \| undefined`	`'top'`
`_type`	`_type`	Defines either the type of the component or of the components interactive element.	`"button" \| "reset" \| "submit" \| undefined`	`'button'`
`_value`	`_value`	Defines the value of the element.	`boolean \| null \| number \| object \| string \| undefined`	`undefined`
`_variant`	`_variant`	Defines which variant should be used for presentation.	`"custom" \| "danger" \| "ghost" \| "normal" \| "primary" \| "secondary" \| "tertiary" \| undefined`	`'normal'`

Methods

click

click() => Promise<void>

Clicks the primary interactive element inside this component.

Returns

Type: Promise<void>

`focus() => Promise<void>`

Sets focus on the internal element.

Returns

Type: Promise<void>

`hidePopover() => Promise<void>`

Hides the popover programmatically by forwarding the call to the web component.

Returns

Type: Promise<void>

`showPopover() => Promise<void>`

Shows the popover programmatically by forwarding the call to the web component.

Returns

Type: Promise<void>

Slots

Slot	Description
	The popover content (displayed when the button is clicked).
`"expert"`	Custom label content for the button (when `_label` is `false`).

PopoverButton

Example

Accessibility

Links and References

Usage

Keyboard Control

Best Practices / Recommendations

Use Cases

Construction / Technical

Playground

Functionality

Basic Button Properties

Button Variants and Styling

Popover Positioning

Popover Content

Shortcuts and Focus

API

Overview

Properties

Methods

click

Returns

`focus() => Promise<void>`

Returns

`hidePopover() => Promise<void>`

Returns

`showPopover() => Promise<void>`

Returns

Slots

Examples

Example​

Accessibility​

Links and References​

Usage​

Keyboard Control​

Best Practices / Recommendations​

Use Cases​

Construction / Technical​

Playground​

Functionality​

Basic Button Properties​

Button Variants and Styling​

Popover Positioning​

Popover Content​

Shortcuts and Focus​

API​

Overview​

Properties​

Methods​

click​

Returns​

focus() => Promise<void>​

Returns​

hidePopover() => Promise<void>​

Returns​

showPopover() => Promise<void>​

Returns​

Slots​

Examples​

Example

Accessibility

Links and References

Usage

Keyboard Control

Best Practices / Recommendations

Use Cases

Construction / Technical

Playground

Functionality

Basic Button Properties

Button Variants and Styling

Popover Positioning

Popover Content

Shortcuts and Focus

API

Overview

Properties

Methods

click

Returns

`focus() => Promise<void>`

Returns

`hidePopover() => Promise<void>`

Returns

`showPopover() => Promise<void>`

Returns

Slots

Examples