# kol-popover-button

<!-- Auto Generated Below -->


## 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() => Promise<void>`

Clicks the primary interactive element inside this component.

#### Returns

Type: `Promise<void>`



### `focus(options?: KolFocusOptions) => Promise<void>`

Sets focus on the internal element.

#### Parameters

| Name      | Type                           | Description |
| --------- | ------------------------------ | ----------- |
| `options` | `KolFocusOptions \| undefined` |             |

#### 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`). |


----------------------------------------------


