Popover | Arbol UI

Language

Appearance

Quick form

import { Button, Popover, PopoverTrigger, TextField } from '@arbol-ai/ui';

<PopoverTrigger>
  <Button variant="outline">Rename campaign</Button>
  <Popover placement="bottom start">
    {({ close }) => (
      <div className="grid gap-3">
        <TextField defaultValue="Spring check-ups" label="Name" />
        <Button onPress={close} size="sm">
          Save
        </Button>
      </div>
    )}
  </Popover>
</PopoverTrigger>

With an arrow

import { Button, Popover, PopoverTrigger } from '@arbol-ai/ui';

<PopoverTrigger>
  <Button variant="ghost">What is a contact rate?</Button>
  <Popover className="w-64 text-sm" showArrow>
    The share of contacts who answered at least once in the period.
  </Popover>
</PopoverTrigger>

Source

The examples above are src/components/popover/popover.examples.tsx, which the library’s tests render too.