Skip to content
hightouchUI

Design system

v39.1.0

Filter Menu

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

#

#

#

#

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

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

#

#

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

#

  • Use sentence case.

#

#

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

NameDefaultDescription
children

—

ReactNode

Menu button and list.

#

Button for opening a menu.

NameDefaultDescription
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.

#

Icon-only button for opening a menu.

NameDefaultDescription
isLoadingfalseboolean

Toggles the loading state.

isDisabledfalseboolean

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.

#

Wrapper for groups.

NameDefaultDescription
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`.

#

Grouping of options.

#

Type: ReactNode

Options.

#

Type: string

Group title displayed above options.

#

Type: "radio" | "checkbox"

Selection type. Use radio to allow a single option to be selected. Use checkbox to allow multiple options to be selected.

#

Type: string | string[]

Selection. When type is "radio", value is always a string. When type is "checkbox", value is always an array of strings.

#

Type: ((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.

#

NameDefaultDescription
isDisabled

—

boolean

Determines if option is disabled.

children

—

ReactNode

Option text.

value

—

string

Option value. Used to identify this option in a selection.