Popover Component

Active filters: Active only

<Popover Position="bottom-start" Width="md" Title="Filter results" ShowCloseButton="true">
    <Anchor>
        <Button Variant="secondary" Text="Filters">
            <LeadingIcon>
                <svg viewBox="0 0 20 20">...</svg>
            </LeadingIcon>
        </Button>
    </Anchor>
    <Content>
        <Checkbox Label="Active patients only" Value="@_filterActive" ValueChanged="..." />
        <Checkbox Label="Has unread notes" Value="@_filterNotes" ValueChanged="..." />
    </Content>
    <Footer>
        <Button Variant="tertiary" Size="sm" Text="Reset" />
        <Button Variant="primary" Size="sm" Text="Apply" />
    </Footer>
</Popover>

@* 12 positions: {top|bottom|left|right}-{start|center|end} *@
<Popover Position="top-start" Width="auto">
    <Anchor><Button Variant="secondary" Size="sm" Text="top-start" /></Anchor>
    <Content><p>Position: top-start</p></Content>
</Popover>

<Popover Position="bottom-start" Width="sm">
    <Anchor>
        <button type="button" style="background: transparent; border: none; cursor: pointer; padding: 0;">
            <Avatar Initials="AT" Size="md" Color="blue" />
        </button>
    </Anchor>
    <Content>
        <div style="display: flex; align-items: center; gap: var(--spacing-3);">
            <Avatar Initials="AT" Size="lg" Color="blue" />
            <div>
                <p>Aiko Tanaka</p>
                <p>aiko.t@example.com</p>
            </div>
        </div>
        <Button Variant="secondary" Size="sm" Text="View profile" />
    </Content>
</Popover>

Popover

Filter panel — composes a form

12 positions

Mini info — assignee preview