Popover
An accessible popup anchored to a button.
<script lang="ts">
import {
Button,
Field,
Form,
Popover,
PopoverDescription,
PopoverPopup,
PopoverTitle,
PopoverTrigger,
Textarea,
} from "coss-svelte";
</script>
<Popover>
<PopoverTrigger>Open Popover</PopoverTrigger>
<PopoverPopup class="w-80">
<div class="mb-4">
<PopoverTitle class="text-base">Send us feedback</PopoverTitle>
<PopoverDescription>Let us know how we can improve.</PopoverDescription>
</div>
<Form class="flex w-full flex-col gap-4">
<Field>
<Textarea aria-label="Send feedback" placeholder="How can we improve?" />
</Field>
<Button type="submit">Send feedback</Button>
</Form>
</PopoverPopup>
</Popover>
Installation
Install the component package, shared coss-svelte theme, and Bits UI peer.
npm install coss-svelte @coss-svelte/theme bits-uiUsage
Import the Svelte component exports directly from the package.
import { Popover, PopoverClose, PopoverDescription, PopoverPopup, PopoverTitle, PopoverTrigger } from "coss-svelte";Anatomy
- Popover
- PopoverClose
- PopoverDescription
- PopoverPopup
- PopoverTitle
- PopoverTrigger
API Reference
Popover
An accessible popup anchored to a button.
| Prop | Type | Default | Description |
|---|---|---|---|
bind:open | boolean | false | Open state for the popup or disclosure. Bind with `bind:open`. |
label | string | "Popover" | Accessible label or fallback visible label for the control. |
children : Snippet<[]>Inherits from Bits UI Popover.Root.
PopoverClose
Renders a control that closes the parent surface.
children : Snippet<[]>child : Snippet<[{ props: Record<string, unknown> }]>bind:ref : HTMLElement | nullInherits from Bits UI Popover.Close.
PopoverDescription
Provides supporting copy for the parent component.
children : Snippet<[]>Inherits from Svelte <p> attributes.
PopoverPopup
Renders the floating or modal surface for the parent component.
| Prop | Type | Default | Description |
|---|---|---|---|
portalProps | { disabled?: boolean; to?: PortalTarget } | {} | Configures the exact Bits Portal target (`to`) or renders inline when `disabled`. |
children : Snippet<[]>bind:ref : HTMLElement | nullInherits from Bits UI Popover.Content.
PopoverTitle
Names the parent surface or section.
children : Snippet<[]>Inherits from Svelte <h2> attributes.
PopoverTrigger
Renders the control that opens, closes, or selects related content.
children : Snippet<[]>child : Snippet<[{ props: Record<string, unknown> }]>bind:ref : HTMLElement | nullInherits from Bits UI Popover.Trigger.
Implementation Details
- Status
- Stable
- Foundation
- bits
- Category
- Overlays & Popups
- Particles
- 3