DocsComponents

Chip

Compact labels for people, selections, and small pieces of information.

Material Design

TypeScript

Installation

Terminal

pnpm dlx shadcn@latest add https://react-toolbox.io/r/chip.json

New here? Set up your project first. Styles, fonts, and required components are included.

Usage

Set deletable and handle onDeleteClick to remove a selection. The parent owns the collection and decides what happens after removal.

Use the Code tab above for a complete example. The import follows your configured UI alias. See Theming to customize colors, spacing, and style slots.

State and callbacks

Chips do not remove themselves. Handle onDeleteClick by removing the chip’s item from your application state; deletable only exposes the delete action.

Use disabled to prevent actions and deleteLabel to give the delete button a useful accessible name.

API reference

Generated from the installed TypeScript source. Defaults are the values declared by each function; a dash means no parameter default is declared. Forwarded props can use the receiving component’s default. Callback types show the exact arguments passed to your handler.

`Chip`

Property	Type	Default
`deletable`	`boolean`	`false`
`deleteLabel`	`string`	`'Remove'`
`disabled`	`boolean`	`false`
`classNames`	`ChipTheme` Classes for the component's rendered parts. Applied after legacy theme overrides.	`—`
`theme`Deprecated alias	`ChipTheme` Use classNames for style slots; use ThemeProvider for design tokens.	`—`
`ref`	`React.Ref<HTMLDivElement>`	`—`

Callbacks

Property	Type	Default
`onClick`	`(event: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>) => void`	`—`
`onDeleteClick`	`(event: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>) => void`	`—`

Also inherits Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'>, except the omissions and overrides in its exported props type below. Use the supported native aria-*, data-*, event, and element attributes as appropriate.

Additional defaults on inherited props: className = ''.

Style slots

Pass a map of Tailwind classes to classNames. Available keys:

avatar
chip
deletable
delete
deleteIcon
deleteX

theme is the deprecated compatibility alias. When both are provided, classNames wins conflicting utilities within each slot. See Theming for tokens and override rules.

Exported TypeScript types

Expand a type to inspect its full declaration, including generic constraints, union branches, callback arguments, ref handles, and inherited props. Import these types from @/components/ui/material/chip.

ChipTheme

tsx

type ChipTheme = Partial<Record<'avatar' | 'chip' | 'deletable' | 'delete' | 'deleteIcon' | 'deleteX', string>>;

ChipClassNames

tsx

type ChipClassNames = ChipTheme;

ChipEvent

tsx

type ChipEvent = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;

ChipProps

tsx

interface ChipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> {
  deletable?: boolean;
  deleteLabel?: string;
  disabled?: boolean;
  onClick?: (event: ChipEvent) => void;
  onDeleteClick?: (event: ChipEvent) => void;
  /** Classes for the component's rendered parts. Applied after legacy theme overrides. */
  classNames?: ChipTheme;
  /** @deprecated Use classNames for style slots; use ThemeProvider for design tokens. */
  theme?: ChipTheme;
  ref?: React.Ref<HTMLDivElement>;
}

Material guidelines

Represent a compact entity, attribute, or selected value. Keep chip text short; use a card or list row for richer content.
Chips are 32px high. When deletion is available, make the delete action distinguishable and keyboard accessible.

Material Design 1: Chips