Skip to main content

    Components

    Qwik M3 Popover

    This component implements the Material Design 3 popover with proper accessibility support. It provides a floating panel that appears relative to a trigger element. Features: - Trigger button with all button variants - Animated panel with shadow and border - Automatic positioning with slide animations - Focus management and keyboard navigation

    Prop Controls

    Interactive Demo

    Basic Popover

    Button Variants

    Rich Content

    
<Popover.Root>
  <Popover.Trigger type="button" look="filled">
    Open Popover
  </Popover.Trigger>
  <Popover.Panel>
    <div class="flex flex-col gap-4">
      <h3 class="text-title-medium">Popover Title</h3>
      <p class="text-body-medium text-on-surface-variant">
        This is the popover content. You can put any content here.
      </p>
      <div class="flex flex-col gap-2">
        <Button type="button">Action 1</Button>
        <Button type="button">Action 2</Button>
      </div>
    </div>
  </Popover.Panel>
</Popover.Root>