ClickorKeyboard shortcut Alt + L

Dragto resize

Nord Design System SearchDeveloperDeveloperGetting startedUsing Web ComponentsWebfontsCDNLocalizationCSS Framework Legacy ESLint PluginWorking with AIFAQDesignDesignGetting startedFoundationsAccessibilityColor SystemColor UtilitiesPrinciplesFigma ToolkitGridIconographyNamingNordhealth BrandTypographyThemesBrand assetsToolsComponentsComponentsAccordion New Aside New Autocomplete New AvatarBadgeBannerButtonButton GroupCalendarCard Updated CheckboxCollapsible New Combobox New Command MenuDate PickerDate Range Picker New DividerDrawer Updated DropdownEmpty StateField New FieldsetFilter Add ButtonFilter DateFilter Date RangeFilter DropdownFilter FieldFilter InputFilter Reset ButtonFooterHeaderIconInputInput Group New Item New Kbd New LayoutMessageMeter New Modal Updated NavigationNotificationNumber Field New Otp Field New Outline New Overflow List New Pagination New PopoutProgressProgress BarQrcodeRadioRangeResizable New Scroll Area New Segmented ControlSelectSkeletonSpinnerStackTabTableTagTextareaTime Picker New Timestamp New ToastToggleTooltipTop BarTruncate New Visually HiddenDesign TokensDesign TokensTailwind CSSTailwind CSSBlocksBlocksTemplatesTemplatesIconsIconsPlaygroundPlaygroundLatest UpdatesLatest UpdatesChangelogChangelogMigration guidesMigration guides
GitHub

Clickto expandKeyboard shortcut Alt + L

FilterResetButton Light DOM & Tailwind

Filter Reset Button clears every active filter at once. It is a thin, intent-only control: it renders a plain button and dispatches a reset event when pressed. Your app owns the active filters and is responsible for clearing them (and any URL/query state) in the handler — the button holds no state of its own. Disable it while there is nothing to reset by binding disabled to whether any filter is active (e.g. ?disabled=${!hasFilters}). Mirrors the Provet Cloud filter reset button.

API reference

FilterResetButton

Filter Reset Button clears every active filter at once. It is a thin, intent-only control: it renders a plain button and dispatches a reset event when pressed. Your app owns the active filters and is responsible for clearing them (and any URL/query state) in the handler — the button holds no state of its own. Disable it while there is nothing to reset by binding disabled to whether any filter is active (e.g. ?disabled=${!hasFilters}). Mirrors the Provet Cloud filter reset button.

<nord-filter-reset-button></nord-filter-reset-button>

Props

PropertyAttribute Description TypeDefault
disableddisabledMakes the component disabled. This prevents users from being able to interact with it and conveys its inactive state to assistive technologies. Bind it to whether any filter is active so the control is only enabled when there is something to reset.booleanfalse
sizesizeThe size of the button.'s' | 'm' | 'l''s'
EventDetail TypeDescription
resetNordEventDispatched when the button is pressed to clear all active filters.

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

PropertyDescriptionDefault
--n-filter-reset-button-colorControls the text and icon color while the button is enabled.var(--n-color-text-highlight)
Light DOM & Tailwind. This component renders in the light DOM, so you can style it directly with your own CSS or Tailwind utility classes — there is no shadow boundary, and its default styles are low specificity, so your utilities win.