salla-applied-filters

Shows the filters currently applied on a product listing as removable chips, plus a "clear all" button. Place it on the same page as salla-filters; it takes the filter definitions and selections from that component, reads the initial selections from the page URL, and renders nothing when no filter is applied. Removing a chip or clearing all calls removeFilter or resetFilters on the page's first salla-filters element. Each remove button has an aria-label made of the delete label and the chip text.

Use itCopy Anchor Link

In HTML or JSX, use the tag <salla-applied-filters> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).

import { SallaAppliedFilters } from '@salla.sa/twilight-components-react/applied-filters';

ExampleCopy Anchor Link

import { SallaFilters } from '@salla.sa/twilight-components-react/filters';
import { SallaAppliedFilters } from '@salla.sa/twilight-components-react/applied-filters';

export function Example() {
  return (
    <>
      <SallaFilters />
      <SallaAppliedFilters />
    </>
  );
}