Skip to content
GU - Design System

Filter list

Figma logo Figma
🧪 Beta
book icon Guidelines
🛠 In progress
desktop icon Web
🔭 Alpha
phone icon Mobile
🔭 Alpha

A filter list is a component that organizes content into navigable tabs, allowing users to refine and narrow down displayed information based on specific criteria.

Filter lists are commonly used in e-commerce sites, data dashboards, and content management systems to improve content discoverability and user interaction.

It enhances user experience by providing an intuitive way to manage and access large datasets or collections, making it easier to find relevant items quickly.

Guidelines

Correct / Incorrect

Takeaways

Features

Usage

Implementation

 
<script lang="ts">
  import { FilterList, FilterType } from '@behavy/glowup-design-system';


  let filters: Array<FilterType> = [FilterType.SORTER, FilterType.FILTER, FilterType.BEST_OFFERS];
</script>


<FilterList {filters} />

Properties

StatusNameTypeDefaultRequiredDescription
🔭filtersFilterType[]✅List of filters to display

Examples

Alternative

No alternative.