Filter menu

Filter menu allows user to filter the data in a table or a list.

Example

Usage

With icon button

Disabled

The filter menu button (and icon button) can be disabled.

You can also disable individual filter menu options instead of the entire button.

Guidelines

When to use

When user should be able to customize the data displayed in a table or a list.

When not to use

If the dropdown triggers one-shot actions rather than holding a selection, use a menu instead.

Content

Use sentence case.

Props

FilterMenu

Root-level component for adding a menu. All menu-related components must be children of FilterMenu.

Name	Default	Description
`children`	—	`ReactNode` Menu button and list.

FilterMenuButton

Button for opening a menu.

Name	Default	Description
`isLoading`	—	`boolean` Toggles the loading state.
`isDisabled`	—	`boolean` Toggles the disabled state.
`isJustified`	—	`boolean` Take up an entire available container width.
`children`	—	`ReactNode` Button text.
`variant`	`"secondary"`	`"primary" \| "secondary" \| "tertiary" \| "danger" \| "warning" \| "link"` Button variant, which determines the purpose the button is used for and its appearance.
`size`	—	`"sm" \| "md" \| "lg" \| "xl"` Determines the height of the button.
`shape`	`"default"`	`"default" \| "circle"` Determines the shape of the button.
`icon`	—	`ComponentType<SVGAttributes<SVGElement>>` Primary icon that's displayed on the left. Only `icon` or `imageUrl` can be set at the same time.
`directionIcon`	—	`ComponentType<SVGAttributes<SVGElement>>` Icon for indicating the direction, displayed on the right side of the button. Used for icons like "arrow right" or "caret down".
`directionIconSize`	—	`IconProps["boxSize"]` Override the default direction icon size. Use only when absolutely necessary, for components like `Menu` and `FilterMenu`.
`imageUrl`	—	`string` URL to an image to display on the left. Only `icon` or `imageUrl` can be set at the same time.

FilterMenuIconButton

Icon-only button for opening a menu.

Name	Default	Description
`isLoading`	`false`	`boolean` Toggles the loading state.
`isDisabled`	`false`	`boolean` Toggles the disabled state.
`aria-label`	—	`string` Button's meaning for screen readers.
`icon`	—	`ComponentType<SVGAttributes<SVGElement>>` Button icon.
`size`	`"md"`	`"2xs" \| "xs" \| "sm" \| "md" \| "lg"` Determines the height of the button.
`shape`	`"default"`	`"default" \| "circle"` Determines the shape of the button
`variant`	`"tertiary"`	`"primary" \| "secondary" \| "tertiary" \| "warning" \| "danger"` Button variant.

FilterMenuList

Wrapper for groups.

Name	Default	Description
`children`	—	`ReactNode` Groups.
`color`	—	`Color` The CSS `color` property.
`textColor`	—	`Color` The CSS `color` property.
`fill`	—	`Color` The CSS `fill` property for icon SVGs and paths.
`stroke`	—	`Color` The CSS `stroke` property for icon SVGs and paths.
`bg`	—	`Color` The CSS `background` property.
`bgColor`	—	`Color` The CSS `background-color` property.
`background`	—	`Color` The CSS `background` property.
`backgroundColor`	—	`Color` The CSS `background-color` property.
`borderColor`	—	`Color` The CSS `border-color` property.
`borderTopColor`	—	`Color` The CSS `border-top-color` property.
`borderBlockStartColor`	—	`Color` The CSS `border-block-start-color` property.
`borderBottomColor`	—	`Color` The CSS `border-bottom-color` property.
`borderBlockEndColor`	—	`Color` The CSS `border-block-end-color` property.
`borderLeftColor`	—	`Color` The CSS `border-left-color` property.
`borderInlineStartColor`	—	`Color` The CSS `border-inline-start-color` property.
`borderRightColor`	—	`Color` The CSS `border-right-color` property.
`borderInlineEndColor`	—	`Color` The CSS `border-inline-end-color` property.
`surface`	—	`Surface` Explicitly set the surface theme advertised to descendant form elements. Useful when `bg` is a value the surface resolver doesn't recognise – e.g. responsive object syntax, an arbitrary hex, or a token applied via `sx` instead of `bg`.

FilterMenuGroup

Name	Default	Description
`type`	—	`"radio" \| "checkbox"` Selection type. Use `radio` to allow a single option to be selected. Use `checkbox` to allow multiple options to be selected.
`value`	—	`string \| string[]` Selection. When `type` is `"radio"`, value is always a string. When `type` is `"checkbox"`, value is always an array of strings.
`onChange`	—	`(value: string) => void \| (value: string[]) => void` Callback for when user selects a single or multiple options, depending on the `type` prop. When `type` is `"radio"`, `value` is always a string. When `type` is `"checkbox"`, `value` is always an array of strings.
`title`	—	`string` Group title.
`children`	—	`ReactNode` Menu items.

FilterMenuOption

Name	Default	Description
`isDisabled`	—	`boolean` Determines if option is disabled.
`children`	—	`ReactNode` Option text.
`value`	—	`string` Option value. Used to identify this option in a selection.

Filter menu

#Usage

#With icon button

#Disabled

#Guidelines

#When to use

#When not to use

#Content

#Props

#FilterMenu

#FilterMenuButton

#FilterMenuIconButton

#FilterMenuList

#FilterMenuGroup

#FilterMenuOption