Popover displays contextual content anchored to a trigger, without leaving the current view. PopoverTrigger pairs a focusable trigger with the Popover, and PopoverHeader / PopoverFooter give it the standard title-and-actions layout.
Import
import {
Popover,
PopoverTrigger,
PopoverHeader,
PopoverFooter
} from '@proyecto-viviana/solid-spectrum';
Header and footer
A trigger followed by a Popover. The header takes a title and optional description; the footer holds the actions.
<PopoverTrigger>
<Button variant="secondary">Settings</Button>
<Popover placement="bottom" size="M">
<PopoverHeader
title="Notifications"
description="Choose how you'd like to be reached."
/>
<PopoverFooter>
<Button variant="secondary" fillStyle="outline">Cancel</Button>
<Button variant="accent">Save</Button>
</PopoverFooter>
</Popover>
</PopoverTrigger>
Sizes
The size prop scales the popover's width. Each of S, M, and L widens the surface a step.