• Home
  • Tactics components
  • Actions
  • Filter (Chip)
Release 25.43.4
Tactics 3.0.13
light_mode
dark_mode

Filter (Chip)

The purpose of a chip component is to present contextual and supplemental options that are relevant to the content on screen.

Tactics Documentation Sport Turf Account

TWIG : Universes/_common/_twig/_components/_filters/_filters.twig
CSS : DesignSystem/_tactics/_common/_css/_components/_filter/_filter.scss
DesignSystem/_tactics/_common/_css/_components/_filter/_grouped.scss
DesignSystem/_tactics/_common/_css/_components/_filter/_scrollable.scss
DesignSystem/_tactics/_common/_css/_components/_filter/_sticky.scss
JS : Universes/_common/_js/_filters/_*.js
Angular component : <bcdk-filters>

Primary

Default

Classic

  • Filter here
  • Filter here more longer
  • Filter here
  • Filter here
  • Filter here
  • Filter here
  • Filter here
  • Filter here
  • Filter here
  • Filter here
  • Filter here more longer
  • Filter here
  • Filter here

With highlighted item

  • Filter here
  • Filter here more longer
  • Filter here
  • Filter here
  • Filter here

Hot (red active state)

  • Filter here
  • Filter here more longer
  • Filter here
  • Filter here
  • Filter here
  • Filter here

Scrollable

  • Filter here
  • Filter here more longer
  • Filter here
  • Filter here
  • Filter here
  • Filter here
  • Filter here
  • Filter here

Scrollable with first element fixed

  • Filter here
  • Filter here more longer
  • Filter here
  • Filter here
  • Filter here
  • Filter here
  • Filter here
  • Filter here

Grouped

  • Filter here
  • Filter here
  • Filter here
  • Filter here
  • Filter here
  • Filter here
  • Filter here
  • Filter here

disabled

  • Filter here
  • Filter here
  • Filter here
  • Filter here
  • Filter here

Alt

Classic

  • Filter here
  • Filter here more longer
  • Filter here
  • Filter here
  • Filter here
  • Filter here
  • Filter here
  • Filter here
  • Filter here
  • Filter here
  • Filter here more longer
  • Filter here
  • Filter here

Hot (red active state)

  • Filter here
  • Filter here more longer
  • Filter here
  • Filter here
  • Filter here
  • Filter here

Scrollable

  • Filter here
  • Filter here more longer
  • Filter here
  • Filter here
  • Filter here
  • Filter here
  • Filter here
  • Filter here
  • Filter here

Scrollable with first element fixed

  • Filter here
  • Filter here more longer
  • Filter here
  • Filter here
  • Filter here
  • Filter here
  • Filter here
  • Filter here
  • Filter here

Grouped

  • Filter here
  • Filter here more longer
  • Filter here
  • Filter here
  • Filter here
  • Filter here
  • Filter here
  • Filter here

Disabled

  • Filter here
  • Filter here
  • Filter here
  • Filter here
  • Filter here