Filter pill

Toggle a facet filter, or show an applied one.

Snowflake PostgreSQL

Snowflake

<div role="group" aria-label="Provider">
  <mm-filter-pill count="1284" pressed>
    <mm-provider-logo slot="start" provider="snowflake" size="14" decorative></mm-provider-logo>Snowflake
  </mm-filter-pill>
  <mm-filter-pill count="412">PostgreSQL</mm-filter-pill>
</div>
<mm-filter-pill removable facet="Provider">Snowflake</mm-filter-pill>

Guidance

Filter pills toggle facets in Discover and list views, such as a provider or a tag. They are round, mm-surface with an mm-rule border that darkens on hover; a pressed pill is inverted ink. The optional count sits in mono with tabular figures. With removable, the pill shows an applied filter (“Provider: Snowflake”) with a remove button, for active-filter rows above results; move focus to the next pill or the search field when you remove it.

Keyboard follows the WAI-ARIA toggle button pattern (https://www.w3.org/WAI/ARIA/apg/patterns/button/): Enter and Space toggle.

Properties

Property	Attribute	Type	Default	Description
pressed	pressed	boolean	false	Whether the facet is applied (toggle mode).
count	count	number | undefined		Number of matching results, shown in mono.
facet	facet	string	''	Facet name shown before the value in a removable pill, such as “Provider”.
removable	removable	boolean	false	Shows an applied filter with a remove button instead of a toggle.
disabled	disabled	boolean	false

Events

Event	Detail	Description
mm-change	CustomEvent<{ pressed: boolean }>	The pill was toggled.
mm-remove	CustomEvent<Record<string, never>>	The remove button of a removable pill was activated.

Slots

Slot	Description
Default	The label.
start	A leading <mm-provider-logo> or <mm-icon>.

CSS parts

Part	Description
pill	The pill (the toggle button, or the wrapper when removable).
count	The count.
remove	The remove button.

Examples

Every state of mm-filter-pill in Storybook, with keyboard and screen reader tests.