Use the filter-button or filter-link classes, to create a button or link styled as a filter button. Group together multiple filter buttons inside of a filter-group container.

Unselected Filter Button

By default, a filter button is in a non-selected state.

Selected Filter Button

Apply the aria-pressed state to a button, or filter-link--selected modifier to a link.

Disabled Filter Button

Apply the disabled property or remove the href attribute to disable a button or link, respectively.

Truncated Filter Button

Long text will automatically become truncated when it reaches the maximum width.