Popover

For small forms and details that belong to one control. It has a title for screen readers, an optional header action and a footer.

import {
  Button,
  Input,
  PopoverContent,
  PopoverRoot,
  PopoverTrigger,
  toast,
} from '@andrewbehma/glass-ui';
import { Copy } from 'lucide-react';

Playground

Popover.tsx

import {
  Button,
  Input,
  PopoverContent,
  PopoverRoot,
  PopoverTrigger,
  toast,
} from '@andrewbehma/glass-ui';
import { Copy } from 'lucide-react';

<PopoverRoot>
  <PopoverTrigger asChild>
    <Button>Share</Button>
  </PopoverTrigger>
  <PopoverContent
    title="Share board"
    description="Anyone with the link can view."
    side="bottom"
    footer={<Button variant="solid" size="sm" onClick={() => toast.success('Link copied')}>Copy link</Button>}
  >
    <Input tone="on-glass" readOnly value="https://glass.luna-realm.com/b/q3-roadmap" />
  </PopoverContent>
</PopoverRoot>