FilterBar

The FilterBar component represents active state. It displays a collection of currently applied filters as removable chips, typically sitting directly above a DataTable or Grid to clarify the current view state.

Demonstration

Usage

<script>
  import { FilterBar } from 'cobogo';

  let filters = [
    { key: 'status', label: 'Status', value: 'Ativo' },
    { key: 'role', label: 'Função', value: 'Arquiteto' }
  ];

  function handleClear(key) {
    filters = filters.filter(f => f.key !== key);
  }

  function handleClearAll() {
    filters = [];
  }
</script>

<FilterBar {filters} onClear={handleClear} onClearAll={handleClearAll} />

Doctrine

Filters are interactive and impermanent. Therefore, the FilterBar uses Curva pills (var(--r-pill)) that contrast geometrically with the strict rectangles of the tables below them. The clear action (“Limpar tudo”) is presented simply, relying on a solid underline and hover behavior to invite interaction without adding unnecessary boxes to the interface.