Filter

<div class="ui-filter is-open">
  <button type="button" class="btn btn-compact btn-with-icon ui-filter__trigger is-active"
    aria-expanded="true" aria-haspopup="dialog" aria-label="Filters, 2 active">
    <span class="ui-icon ui-icon--filter btn-icon" aria-hidden="true"></span>
    <span class="ui-filter__badge" aria-hidden="true">2</span>
  </button>
</div>
<div class="ui-filter__popover" role="dialog" aria-label="Filters">…</div>
<div class="ui-filter-chips">
  <button type="button" class="ui-filter-chip">Submitted …</button>
</div>

import { Filter, FilterField, FilterChips, FilterChip, Select, Button } from 'caustica-design/core'
import 'caustica-design/css'

<Filter
  open={open}
  onOpenChange={setOpen}
  activeCount={2}
  triggerLabel="Filters, 2 active"
  popoverLabel="Filters"
  footer={
    <>
      <Button variant="ghost" compact>Reset</Button>
      <Button variant="primary" compact>Apply</Button>
    </>
  }
>
  <FilterField label="Status">
    <Select value={status} options={…} onChange={setStatus} aria-label="Status" />
  </FilterField>
</Filter>
<FilterChips>
  <FilterChip onClick={…}>Submitted</FilterChip>
</FilterChips>