Igloo branding

Filter

The filter component is a button that is used to filter the items of a list or table.

Installation

To install @igloo-ui/filter in your project, you will need to run the following command using npm:

npm install @igloo-ui/filter

If you prefer Yarn, use the following command instead:

yarn add @igloo-ui/filter

Usage

Then to use the component in your code just import it!

import Filter from '@igloo-ui/filter';

<Filter
  onClick={() => {
    setSelected(!selected);
    alert('Filter was clicked');
  }}
  selected={selected}
>
  Assigned to me (5)
</Filter>;

API

PropTypeDescription
childrenReactNodeAdd the main text/icon to the filter
classNamestringAdd class names to the filter
dataTeststringAdd a data-test tag for automated tests
disabledbooleanTrue if the filter should be disabled
onClick(e?: SyntheticEvent<Element, Event>) => voidAdd an event for when the filter is clicked
selectedbooleanTrue if the tag is selected