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

FilterAddButton Light DOM & Tailwind

Filter Add Button opens a popout of available filters and emits the chosen one so your app can add it to the bar. Pass a flat list of options, or group them under headings; selecting one fires a select event with the option's id and closes the popout. Like the other filter primitives it is intent-only: it does not track which filters are active. Your app owns the active filters and decides what to do on select (typically render a new Filter Field). Mirrors the Provet Cloud filter add button.

API reference

FilterAddButton

Filter Add Button opens a popout of available filters and emits the chosen one so your app can add it to the bar. Pass a flat list of options, or group them under headings; selecting one fires a select event with the option's id and closes the popout. Like the other filter primitives it is intent-only: it does not track which filters are active. Your app owns the active filters and decides what to do on select (typically render a new Filter Field). Mirrors the Provet Cloud filter add button.

<nord-filter-add-button></nord-filter-add-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.booleanfalse
openopenWhether the popout is open. Set it to open or close the popout programmatically.booleanfalse
sizesizeThe size of the button.'s' | 'm' | 'l''s'

Methods

Method nameParameters Description
show() => voidN/AOpen the popout.
hide() => voidN/AClose the popout.
EventDetail TypeDescription
selectFilterAddButtonSelectEventDispatched with the chosen option's id when an option is selected.
openNordEventDispatched when the popout is opened.
closeNordEventDispatched when the popout is closed.

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-add-button-list-inline-sizeControls the inline size, or width, of the popout list.250px
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.