Filter pills

Nav rapide

Basic With Quantity With Suppresed Button Active All Filters

Filter pills

Basic - Voir le template

<button class="filter-pill border-ui px-13 hover:bg-ui-light">

    <span>Modèle</span>

</button>

With Quantity - Voir le template

<button class="filter-pill border-ui px-13 hover:bg-ui-light">

    <span>Modèle</span>

    <span class="filter-pill__notice bg-primary-accent text-white">5</span>

</button>

With Suppresed Button - Voir le template

<button class="filter-pill border-[#37465C] px-4 hover:bg-ui-light">

    <span clas="text-xxs font-semibold">Innovation</span>

    <?= icon('close', 'w-2.5'); ?>

</button>

Active

Active - Voir le template

<button class="filter-pill border-ui px-13 hover:bg-ui-light">

    <span>Modèle</span>

    <span class="filter-pill__notice bg-primary-accent text-white">5</span>

</button>

All Filters

All Filters - Voir le template

<button class="filter-pill bg-primary-accent text-white px-5 hover:bg-primary">

    <span>Tous les filtres</span>

    <span class="filter-pill__notice bg-white text-primary-accent">5</span>

</button>