Popover - rafty/ui Docs

Displays rich content in a portal, triggered by a button.

This component is made on top of Radix UIs Popover Component with our styling conventions. This component has been shared with you, ensuring that all its native properties are accessible. If you need to apply your own styling you can use the isBarebone (to remove styling from entire component and its subcomponents) or isUnstyled (to remove styling from a particular subcomponent).

Anatomy

Import all parts and piece them together.

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopverClose,
} from "@rafty/ui";

<Popover>
  <PopoverTrigger />
  <PopoverContent>
    <PopverClose />
  </PopoverContent>
</Popover>;

Usage

<Popover>
  <PopoverTrigger>
    Open
  </PopoverTrigger>
  <PopoverContent className="!w-96 space-y-3">
    <Text>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
    </Text>
    <div className="flex justify-end gap-3">
      <Button size="sm">
        Button
      </Button>
      <Button
        colorScheme="primary"
        size="sm"
      >
        Button
      </Button>
    </div>
  </PopoverContent>
</Popover>

Size

There are 3 size options in popover: sm, md (default) & lg

<Popover size="sm">
  <PopoverTrigger>
    Open
  </PopoverTrigger>
  <PopoverContent className="!w-96 space-y-3">
    <Text>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
    </Text>
    <div className="flex justify-end gap-3">
      <Button size="sm">
        Button
      </Button>
      <Button
        colorScheme="primary"
        size="sm"
      >
        Button
      </Button>
    </div>
  </PopoverContent>
</Popover>

Open

To manage open state of popover you can use open prop and to open popover by default pass defaultOpen prop.

<Popover open>
  <PopoverTrigger>
    Open
  </PopoverTrigger>
  <PopoverContent className="!w-96 space-y-3">
    <Text>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
    </Text>
    <div className="flex justify-end gap-3 py-1">
      <Button
        colorScheme="success"
        size="sm"
      >
        Demo 1
      </Button>
      <Button
        colorScheme="error"
        size="sm"
      >
        Demo 2
      </Button>
    </div>
  </PopoverContent>
</Popover>

ShowArrow

To make arrow on top of content visible you can use showArrow prop. It is a boolean type prop whose default value is false.

<Popover>
  <PopoverTrigger>
    Open
  </PopoverTrigger>
  <PopoverContent
    className="!w-96"
    showArrow
  >
    <Text>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
    </Text>
    <div className="mt-3 flex justify-end gap-3 py-1">
      <Button
        colorScheme="success"
        size="sm"
      >
        Demo 1
      </Button>
      <Button
        colorScheme="error"
        size="sm"
      >
        Demo 2
      </Button>
    </div>
  </PopoverContent>
</Popover>

Barebone

Pass isBarebone prop to remove all style in popover.

<Popover isBarebone>
  <PopoverTrigger
    className="rounded-md bg-slate-100 px-4 py-2 hover:bg-slate-100 hover:text-purple-600 dark:bg-zinc-700 dark:text-white dark:hover:bg-zinc-500"
    size="lg"
  >
    Open
  </PopoverTrigger>
  <PopoverContent className="bg-secondary-50 w-[300px] space-y-4 rounded-lg p-4 shadow-lg dark:bg-stone-950">
    <Text>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
    </Text>
    <div className="flex justify-end gap-3">
      <Button
        className="!bg-green-300 !text-black"
        size="sm"
      >
        Demo 1
      </Button>
      <Button
        className="!bg-blue-300 !text-black"
        size="sm"
      >
        Demo 2
      </Button>
    </div>
  </PopoverContent>
</Popover>

API

Root

Property	Description	Type	Default
isBarebone		`boolean`	false

Trigger

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`	false

Content

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`	false
showArrow	Set Arrow visibility	`boolean`	false