• Home
  • Tactics components
  • Actions
  • Filter (Chip)
Release 24.47.6
Tactics 2.11.0
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 : Betclic/_common/_twig/_components/_filters/_filters.twig
CSS : Betclic/_tactics/_common/_css/_components/_filter/_filter.scss
Betclic/_tactics/_common/_css/_components/_filter/_closable.scss
Betclic/_tactics/_common/_css/_components/_filter/_grouped.scss
Betclic/_tactics/_common/_css/_components/_filter/_primary.scss
Betclic/_tactics/_common/_css/_components/_filter/_scrollable.scss
Betclic/_tactics/_common/_css/_components/_filter/_sticky.scss
JS : Betclic/_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

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

Sub

  • Filter here

Search

Grouped

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

Sub + grouped

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

Closable

  • 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

Sub

  • Filter here

Grouped

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

Sub + grouped

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