Filter

Sort through and order products by specific criteria.

Documented

The component is fully documented

Figma component

Includes a link to a Figma component that has been imported to Supernova

Open in Figma

Status

The component has a health status indicated

Healthy

Overview

The filter component is used to sort and order products, items, and collections of data by specific terms.

Filter Preview

Usage

Don’t embed a filter component in another filter component more than twice.

Only implement a filter component when there is a necessity to refine or distill extensive datasets or information repositories (ex: products).

Make sure the width of the filter component stays static.

Variants

Filter Variants