# Install

```shell
npm i @mate-react/popover
```

# Import

```tsx
import { MatePopover } from '@mate-react/popover';
import { MateButton } from '@mate-react/button';
```

# Variants

## Default

```tsx
<>
  <MateButton id="popover-target">Open Popover</MateButton>
  <MatePopover for="popover-target" titleText="Popover Title" opened={opened} onOpenedChanged={e => setOpened(e.detail.value)}>
    <p>Popover content</p>
  </MatePopover>
</>
```

## With Footer

```tsx
<MatePopover for="popover-target" titleText="Popover with Footer" opened={opened} onOpenedChanged={e => setOpened(e.detail.value)}>
  <p>Popover content</p>
  <MateButton slot="footer">Aktion</MateButton>
  <MateButton slot="footer" theme="primary">Bestätigen</MateButton>
</MatePopover>
```

## With Arrow

```tsx
<MatePopover for="popover-target" theme="arrow" position="bottom" opened={opened} onOpenedChanged={e => setOpened(e.detail.value)}>
  <p>Popover with arrow</p>
</MatePopover>