Popover

<x-aura::popover align="left" width="72">
    <x-slot:trigger>
        <x-aura::button variant="secondary" size="sm" icon="sliders-horizontal">
            Filter
        </x-aura::button>
    </x-slot:trigger>

    <x-aura::flex direction="col" align="stretch" gap="3">
        <x-aura::checkbox label="In Stock Only" :checked="true" />
        <x-aura::checkbox label="On Sale" :checked="true" />

        <x-aura::button variant="primary" size="xs">
            Apply
        </x-aura::button>
    </x-aura::flex>
</x-aura::popover>

<x-aura::popover align="center" width="80">
    <x-slot:trigger>
        <x-aura::button variant="outline" size="sm" icon="user">
            Alex
        </x-aura::button>
    </x-slot:trigger>

    <x-aura::flex direction="col" gap="3">
        <x-aura::flex align="center" gap="3">
            <x-aura::avatar src="https://..." size="md" status="online" />
            <x-aura::text size="sm" weight="semibold">Alex Morgan</x-aura::text>
        </x-aura::flex>

        <x-aura::separator />

        <x-aura::button variant="primary" size="xs">
            View Profile
        </x-aura::button>
    </x-aura::flex>
</x-aura::popover>