Popover

<button type="button" class="aura-btn aura-btn--secondary"
        aria-haspopup="dialog" aria-expanded="true" aria-controls="p1">Filters</button>

<div id="p1" role="dialog" aria-label="Filters" data-state="open" class="aura-popup aura-popover aura-card">
  <p class="aura-text aura-text--body">Anything can go here.</p>
</div>

import { Button, Popover, Stack, Typography } from '@ilomee/aura-react';

/**
 * Click the trigger. The panel is portalled to `document.body` and positioned by `place()`, so
 * it flips when it does not fit and follows a scroll — and it closes on Escape or on a
 * pointerdown anywhere but itself and the trigger.
 */
export default function Demo() {
  return (
    <Popover
      label="Filters"
      content={
        <Stack gap={2}>
          <Typography variant="h3">Filters</Typography>
          <Typography variant="body" tone="muted">
            Anything can go here — a popover holds things to interact with, which is the half a
            tooltip cannot have.
          </Typography>
        </Stack>
      }
    >
      <Button variant="secondary">Filters</Button>
    </Popover>
  );
}

<script setup lang="ts">
import { Popover, Button } from '@ilomee/aura-vue';
</script>

<template>
  <Popover label="Filters">
    <template #content><p>Anything can go here.</p></template>
    <Button variant="secondary">Filters</Button>
  </Popover>
</template>

<script lang="ts">
  import { Popover } from '@ilomee/aura-svelte';
</script>

<Popover label="Filters">
  {#snippet trigger(props)}
    <button type="button" class="aura-btn aura-btn--secondary" {...props}>Filters</button>
  {/snippet}
  <p>Anything can go here.</p>
</Popover>

<button auraButton variant="secondary" [auraPopover]="panel" label="Filters">Filters</button>
<ng-template #panel><p auraText>Anything can go here.</p></ng-template>