Filters allow users to dynamically filter data and/or content. Through filtering, users can reduce the amount of information being displayed.
| Name | Description | Default |
|---|---|---|
| filtersAppliedCount | The total number of filters selected across all categories number | - |
| showMenu | Boolean to control visibility of menu (controlled) boolean | - |
| defaultShowMenu | Boolean to control the initial visibility of menu (uncontrolled) boolean | - |
| onFilterButtonClick | Callback function that's called when filter IconButton is clicked ((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void) | - |
| onMenuClose | Callback function that's called when the filter menu is closed (() => void) | - |
| iconButtonOtherProps | Props to pass to icon button IconButtonOtherProps | - |
| badgeProps | Props to pass to the badge on the filter icon button BadgeOtherProps | - |
| onCloseButtonClick | Callback function that's called when close button is clicked ((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void) | - |
| closeButtonRef | Ref for the close button. MutableRefObject<HTMLButtonElement | null> | - |
| closeButtonProps | Props to pass to the close IconButton IconButtonOtherProps | - |
| id* | Id for the filter menu string | - |
| onResetButtonClick | Callback function that's called when reset button is clicked ((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void) | - |
| onApplyButtonClick | Callback function that's called when apply button is clicked ((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void) | - |
| showResetButton | Boolean to control visibility of reset button boolean | - |
| showApplyButton | Boolean to control visibility of apply button boolean | - |
| menuStyles | CSS style object to pass to filter menu CSSProperties | - |
| resetButtonProps | Props to pass to the reset Button ButtonOtherProps | - |
| applyButtonProps | Props to pass to the apply Button ButtonOtherProps | - |
| labelOverrides | Overrides for labels that have been defaulted in the component. DefaultFilterLabelOverrides | - |
| Name | Description | Default |
|---|---|---|
| closeButton | @ignore Only display closeButton for non-persistent filter menus. FilterMenu parent component will handle passing the closeButton prop to FilterPersistent ReactElement<any, string | JSXElementConstructor<any>> | - |
| id* | Id for the filter menu string | - |
| onResetButtonClick | Callback function that's called when reset button is clicked ((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void) | - |
| onApplyButtonClick | Callback function that's called when apply button is clicked ((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void) | - |
| showResetButton | Boolean to control visibility of reset button boolean | - |
| showApplyButton | Boolean to control visibility of apply button boolean | - |
| menuStyles | CSS style object to pass to filter menu CSSProperties | - |
| resetButtonProps | Props to pass to the reset Button ButtonOtherProps | - |
| applyButtonProps | Props to pass to the apply Button ButtonOtherProps | - |
| labelOverrides | Overrides for labels that have been defaulted in the component. Omit<DefaultFilterLabelOverrides, "closeButtonScreenReaderLabel"> | - |
Connect with the DLS Team on Slack or by email.
Check out additional resources.