---
sidebar_position: 31
---

import { Popover, Title, Text, Button, ActionIcon, Avatar } from "rizzui";
import Paper from "@site/src/components/paper";
import { TrashIcon } from "@heroicons/react/24/solid";

# Popover

Popover is a simple dialog alert which can have details of the content. It can either have a confirm, cancel button or any action that can be triggered by the user's decision.

```tsx
import { Popover } from "rizzui";
```

<div className="mb-20 md:mb-28" />

## Default

A simple **Popover** component.

<Paper>
  <Popover>
    <Popover.Trigger>
      <Button variant="outline">Open Popover</Button>
    </Popover.Trigger>
    <Popover.Content>
      <Title as="h6" fontWeight="medium" className="!mb-0">
        Default popover
      </Title>
      <Text>It is opened when button is clicked. </Text>
    </Popover.Content>
  </Popover>
</Paper>

```tsx
import { Popover, Title, Text, Button } from "rizzui";

export default function App() {
  return (
    <Popover>
      <Popover.Trigger>
        <Button variant="outline">Open Popover</Button>
      </Popover.Trigger>
      <Popover.Content>
        <Title as="h6" fontWeight="medium">
          Default popover
        </Title>
        <Text>It is opened when button is clicked. </Text>
      </Popover.Content>
    </Popover>
  );
}
```

<div className="mb-16" />

## Actionable

You can create actionable **Popover** using state.

<Paper>
  <Popover>
    <Popover.Trigger>
      <ActionIcon variant="outline" color="danger">
        <TrashIcon className="w-5 h-auto" />
      </ActionIcon>
    </Popover.Trigger>
    <Popover.Content>
      {({ setOpen }) => (
        <div className="w-56">
          <Text as="b" className="font-medium mb-1">
            Delete the task
          </Text>
          <Text className="mb-1 text-sm">
            Are you sure you want to delete the task?
          </Text>
          <div className="flex justify-end gap-3 mb-1">
            <Button size="sm" variant="outline">
              No
            </Button>
            <Button size="sm" onClick={() => setOpen(false)}>
              Yes
            </Button>
          </div>
        </div>
      )}
    </Popover.Content>
  </Popover>
</Paper>

```tsx
import React from "react";
import { Popover, Title, Text, Button } from "rizzui";
import { TrashIcon } from "@heroicons/react/24/solid";

export default function App() {
  return (
    <Popover>
      <Popover.Trigger>
        <Button variant="outline" color="danger">
          <TrashIcon className="w-5 h-auto" />
        </Button>
      </Popover.Trigger>
      <Popover.Content>
        {({ setOpen }) => (
          <div className="w-56">
            <Title as="h6">Delete the task</Title>
            <Text>Are you sure you want to delete the task?</Text>
            <div className="flex justify-end gap-3 mb-1">
              <Button size="sm" variant="outline">
                No
              </Button>
              <Button size="sm" onClick={() => setOpen(false)}>
                Yes
              </Button>
            </div>
          </div>
        )}
      </Popover.Content>
    </Popover>
  );
}
```

<div className="mb-16" />

## Controlled

You can control Popover state with **isOpen** and **setIsOpen** props:

<Paper>
  <Popover>
    <Popover.Trigger>
      <Button variant="outline">Open Popover</Button>
    </Popover.Trigger>
    <Popover.Content>
      <Title as="h6" className="!mb-0 font-semibold">
        Controlled popover
      </Title>
      <Text>It is opened when button is clicked. </Text>
    </Popover.Content>
  </Popover>
</Paper>

```tsx
import React, { useState } from "react";
import { Popover, Title, Text, Button } from "rizzui";

export default function App() {
  const [isOpen, setIsOpen] = useState();
  return (
    <Popover isOpen={isOpen} setIsOpen={setIsOpen}>
      <Popover.Trigger>
        <Button variant="outline">Open Popover</Button>
      </Popover.Trigger>
      <Popover.Content>
        <Title as="h6" className="!mb-0 font-semibold">
          Controlled popover
        </Title>
        <Text>It is opened when button is clicked. </Text>
      </Popover.Content>
    </Popover>
  );
}
```

<div className="mb-16" />

## With Backdrop Overlay

You can render any thing using our **Popover** component.

<Paper>
  <Popover enableOverlay overlayClassName="z-[9999]">
    <Popover.Trigger>
      <div className="w-12 cursor-pointer">
        <Avatar
          name="Jane Doe"
          src="https://randomuser.me/api/portraits/women/40.jpg"
          size="lg"
        />
      </div>
    </Popover.Trigger>
    <Popover.Content className="z-[9999]">
      {({ setOpen }) => (
        <div className="font-geist">
          <div className="mb-3 flex items-center gap-3">
            <Avatar
              name="John Doe"
              src="https://randomuser.me/api/portraits/women/40.jpg"
              className="ring-2 ring-blue ring-offset-2"
              size="lg"
            />
            <div>
              <Text className="text-base font-semibold text-gray-900">
                Fred Chaparro
              </Text>
              <Text className="text-sm text-gray-500">@fredchaparro</Text>
            </div>
          </div>
          <div className="max-w-[240px] text-sm">
            <Text className="text-gray-700">
              Full-stack Developer, love to work with @redq. 🎉{" "}
            </Text>
            <div className="mt-3 inline-flex gap-3 text-gray-500">
              <Text>
                <Text as="span" className="font-medium text-gray-700">
                  8
                </Text>{" "}
                Following
              </Text>
              <Text>
                <Text as="span" className="font-medium text-gray-700">
                  10.5k
                </Text>{" "}
                Followers
              </Text>
            </div>
          </div>
          <Button
            className="mt-4 w-full"
            size="sm"
            onClick={() => setOpen(false)}
          >
            Follow
          </Button>
        </div>
      )}
    </Popover.Content>
  </Popover>
</Paper>

```tsx
import React from "react";
import { Popover, Button, Avatar } from "rizzui";

export default function App() {
  return (
    <Popover enableOverlay>
      <Popover.Trigger>
        <div className="w-12 cursor-pointer">
          <Avatar
            name="Jane Doe"
            src="https://randomuser.me/api/portraits/women/40.jpg"
            size="lg"
          />
        </div>
      </Popover.Trigger>
      <Popover.Content>
        {({ setOpen }) => (
          <div className="font-geist">
            <div className="mb-3 flex items-center gap-3">
              <Avatar
                name="John Doe"
                src="https://randomuser.me/api/portraits/women/40.jpg"
                className="ring-2 ring-blue ring-offset-2"
                size="lg"
              />
              <div>
                <Text className="text-base font-semibold text-gray-900">
                  Fred Chaparro
                </Text>
                <Text className="text-sm text-gray-500">@fredchaparro</Text>
              </div>
            </div>
            <div className="max-w-[240px] text-sm">
              <Text className="text-gray-700">
                Full-stack Developer, love to work with @redq. 🎉{" "}
              </Text>
              <div className="mt-3 inline-flex gap-3 text-gray-500">
                <Text>
                  <Text as="span" className="font-medium text-gray-700">
                    8
                  </Text>{" "}
                  Following
                </Text>
                <Text>
                  <Text as="span" className="font-medium text-gray-700">
                    10.5k
                  </Text>{" "}
                  Followers
                </Text>
              </div>
            </div>
            <Button
              className="mt-4 w-full"
              size="sm"
              onClick={() => setOpen(false)}
            >
              Follow
            </Button>
          </div>
        )}
      </Popover.Content>
    </Popover>
  );
}
```

<div className="mb-20" />

## API Reference

<hr />

<div className="mb-10" />

#### Popover Props

Here is the API documentation of the Popover component.

<div className="overflow-x-auto">

|      Props       |                   Type                   |                             Description                              |  Default   |
| :--------------: | :--------------------------------------: | :------------------------------------------------------------------: | :--------: |
|     children     |                   \_\_                   |      Use **Popover.Trigger** & **Popover.Content** as childrens      |    \_\_    |
|       gap        |                 `number`                 | Set the offset value from **Popover.Trigger** to **Popover.Content** |   `"8"`    |
|      isOpen      |                `boolean`                 |         Pass **isOpen** state to toggle the popover content          |    \_\_    |
|    setIsOpen     |   `Dispatch<SetStateAction<boolean>>`    |                 Pass **setIsOpen** to set open value                 |    \_\_    |
|       size       |      [PopoverSizes](#popover-sizes)      |                     Supported popover sizes are:                     |   `"md"`   |
|     rounded      |    [PopoverRounded](#popover-rounded)    |                      The rounded variants are:                       |   `"md"`   |
|    placement     | [PopoverPlacements](#popover-placements) |                  Supported popover placements are:                   | `"bottom"` |
|      shadow      |    [PopoverShadow](#popover-shadows)     |                    Supported popover shadows are:                    |   `"md"`   |
|    animation     | [PopoverAnimation](#popover-animations)  |                  Supported popover animations are:                   | `"zoomIn"` |
|    showArrow     |                `boolean`                 |           Whether popover arrow should be shown or hidden            |  `"true"`  |
|  arrowClassName  |                 `string`                 |                   Add custom classes to the arrow                    |    \_\_    |
|  enableOverlay   |                `boolean`                 |      Whether popover backdrop overlay should be shown or hidden      | `"false"`  |
| overlayClassName |                 `string`                 |                  Add custom classes to the overlay                   |    \_\_    |

</div>

<div className="mb-10" />

### Popover Sizes

```ts
type PopoverSizes = "sm" | "md" | "lg" | "xl";
```

<div className="mb-10" />

### Popover Rounded

```ts
type PopoverRounded = "sm" | "md" | "lg" | "none" | "pill";
```

<div className="mb-10" />

### Popover Placements

```ts
type PopoverPlacements =
  | "left"
  | "right"
  | "top"
  | "bottom"
  | "left-start"
  | "left-end"
  | "right-start"
  | "right-end"
  | "top-start"
  | "top-end"
  | "bottom-start"
  | "bottom-end";
```

<div className="mb-10" />

### Popover Shadows

```ts
type PopoverShadow = "sm" | "md" | "lg" | "xl";
```

### Popover Animations

```ts
type PopoverAnimation = "fadeIn" | "zoomIn" | "slideIn";
```
