FilterChip

FilterChip is a button that removes an applied filter. Use it in a row of applied filters chosen in a menu or panel. For passive metadata use Badge, and for a condition the user edits use FilterCondition.

Clicking the label or × removes the filter. It never opens an editor or toggles a choice.
Give it a full aria-label, such as "Remove status filter: Paid".
Your app owns the filter values. After removal, move focus to the next chip, the previous chip or a stable filter control.
Long labels truncate on screen but keep their full accessible name.
It has one compact size that follows the density setting.

'use client';

import { FilterChip } from '@/components/nxds/components/filter-chip/filter-chip';

export default function FilterChipDefault() {
  return (
    <FilterChip aria-label="Remove status filter: Active">
      Status: Active
    </FilterChip>
  );
}

Installation

npx nxds-cli@latest add filter-chip

Run npx nxds-cli@latest init first if nxds isn’t set up in your app yet. See Install.

Usage

import { FilterChip } from '@/components/nxds/components/filter-chip/filter-chip';

Props

FilterChip

FilterChip props
Prop	Type	Default	Description
`aria-label`Required	`string`	No default documented	Names the action, field and full value, such as "Remove status filter: Active".

Clicking the label or × removes the filter. It never opens an editor or toggles a choice.
Give it a full aria-label, such as "Remove status filter: Paid".
Your app owns the filter values. After removal, move focus to the next chip, the previous chip or a stable filter control.
Long labels truncate on screen but keep their full accessible name.
It has one compact size that follows the density setting.

<script setup lang="ts">
import { FilterChip } from '@/components/filter-chip';
</script>

<template>
  <FilterChip aria-label="Remove status filter: Active"
    >Status: Active</FilterChip
  >
</template>

Installation

Install these components first:
Button, ButtonGroup, Spinner.

Copy and paste the following code into your project.

components/filter-chip/FilterChip.vue

<script setup lang="ts">
import type { HTMLAttributes } from 'vue';

import { IconX } from '../../lib/icons';
import { cn } from '../../lib/utils';
import { buttonVariants } from '../button';

export interface FilterChipProps {
  /** Names the action, field and full value, such as "Remove status filter: Active". */
  ariaLabel: string;
  class?: HTMLAttributes['class'];
}

defineOptions({ inheritAttrs: false });

const props = defineProps<FilterChipProps>();
</script>

<template>
  <button
    v-bind="$attrs"
    type="button"
    data-slot="filter-chip"
    :aria-label="ariaLabel"
    :class="
      cn(
        buttonVariants({ variant: 'outline', size: 'sm' }),
        'nx:h-(--nx-spacing-8) nx:max-w-full nx:min-w-0 nx:justify-start nx:active:scale-100',
        props.class
      )
    "
  >
    <span data-slot="filter-chip-label" class="nx:min-w-0 nx:truncate">
      <slot />
    </span>
    <IconX aria-hidden="true" />
  </button>
</template>

components/filter-chip/index.ts

export { default as FilterChip, type FilterChipProps } from './FilterChip.vue';

Keep each file at the path shown above it.
Paths are relative to packages/vue/src/. Keep the same folders under your @/ root, and the imports between files work without edits.

Usage

import { FilterChip } from '@/components/filter-chip';

Props

FilterChip

FilterChip props
Prop	Type	Default	Description
`ariaLabel`Required	`string`	No default documented	Names the action, field and full value, such as "Remove status filter: Active".