Skip to content

SiFilterBarComponent documentation

selector
si-filter-bar

Input Properties

NameTypeDefaultDescription
allowReset
booleantrueSet false to hide reset filters button
collapsedFiltersDescription
TranslatableString$localize`:@@SI_FILTER_BAR.COLLAPSED_FILTERS_DESCRIPTION:+ {{count}} filters`Custom text for the collapsed filters.
colorVariant
BackgroundColorVariant'base-1'Color to use for component background
disabled
booleanfalseSet to true to disable component
filterDefaultText
TranslatableString$localize`:@@SI_FILTER_BAR.NO_FILTERS:No filters applied`Custom text if no filters are selected.
filters
Filter[][]Array of filter items to show
resetText
TranslatableString$localize`:@@SI_FILTER_BAR.RESET_FILTERS:Reset filters`Text for reset button

Output Properties

NameTypeDescription
filtersChange
Filter[]Array of filter items to show
resetFilters
voidOutput callback to be executed when the reset filter is clicked

Types Documentation

(string & Translatable)
Represents a translatable string. This can either be a translation key, e.g. ACTIONS.EDIT that will be automatically translated when displayed on the UI or a pre-translated string, e.g. Edit . Equivalent to a normal string in usage and functionality.
("base-1" | "base-0")
Use this type with filter components colorVariant to render component variants based on background of container
Properties
Short description of filter pill. Can be left empty if title is used to align the title to middle of pill.
description?: string
Identification name of filter pill. Is not shown to the user, please specify either a title or a description .
filterName: string
Status of filter pill
status: FilterStatusType
Shown title of filter pill. Can be left empty if description is used.
title?: string
Translatable
import
("default" | "success" | "info" | "warning" | "danger" | "inactive")
Copyright (c) Siemens 2016 - 2025 SPDX-License-Identifier: MIT

Except where otherwise noted, content on this site is licensed under MIT License.