Chip

Data Display

Chip

Assist and filter chips with optional icons for inline metadata.

Usage

Show attributes, selections, or quick filters that can be toggled.

Highlights

• Icon and avatar slots
• Supports onPress/onClose gestures

When to use it

• Inline filters for tables or feeds.
• Represent tokens like skills, tags, or statuses.

Related components

BadgeButtonSelect

Examples

Default

Preview (Web)

import { Chip } from 'react-native-molecules/components/Chip';
import { Icon } from 'react-native-molecules/components/Icon';

export default function Example() {
  return (
      <Chip
          label="Default Chip"
          variant="outlined"
          size="md"
          left={<Icon name="star-outline" size={18} />}
      />
  );
}

Suggestion Chip

Preview (Web)

import { Chip } from 'react-native-molecules/components/Chip';

export default function Example() {
  return <Chip.Suggestion label="Suggestion Chip" variant="outlined" size="md" />;
}

Assist Chip

Preview (Web)

import { Chip } from 'react-native-molecules/components/Chip';
import { Icon } from 'react-native-molecules/components/Icon';

export default function Example() {
  return (
      <Chip.Assist
          label="Assist Chip"
          variant="outlined"
          size="md"
          left={<Icon name="calendar" size={18} />}
      />
  );
}

Input Chip

Preview (Web)

import { useState } from 'react';
import { Chip } from 'react-native-molecules/components/Chip';

export default function Example() {
  const [selected, setSelected] = useState(false);

  return (
      <Chip.Input
          selected={selected}
          onPress={() => setSelected((prev) => !prev)}
          label="Input Chip"
      />
  );
}

Filter Chip

Preview (Web)

import { useState } from 'react';
import { Chip } from 'react-native-molecules/components/Chip';

export default function Example() {
  const [selected, setSelected] = useState(false);

  return (
      <Chip.Filter
          selected={selected}
          onPress={() => setSelected((prev) => !prev)}
          label="Filter Chip"
      />
  );
}

Prop	Type	Default	Description
testID	string | undefined	—	—
accessibilityLabel	string | undefined	—	Accessibility label for the chip. This is read by the screen reader when the user taps the chip.
onPress	(((event: GestureResponderEvent) => void) & ((e: GestureResponderEvent) => void) & ((e: GestureResponderEvent) => void)) | undefined	—	Function to execute on press.
disabled	boolean | undefined	—	Whether the chip is disabled. A disabled chip is greyed out and `onPress` is not called on touch.
labelRequired	string	—	label of the chip Will be truncated if it's longer than 20 characters
labelCharacterLimit	number | undefined	—	character limit of the label
variant	"outlined" | "elevated" | undefined	—	Variant of the chip. - `elevated` - elevated chip with shadow and without outline. - `outlined` - chip with an outline. (outline will always have elevation 0 even if it's specified)
size	"sm" | "md" | undefined	—	—
onClose	(() => void) | undefined	—	callback event when the closeIcon is pressed
elevation	MD3Elevation | undefined	—	elevation level of the elevated chip
selected	boolean | undefined	—	selected state
closeIconProps	Partial<IconButtonProps> | undefined	—	props for the close icon default is { name: 'close', onPress: onClose, disabled, accessibilityLabel: 'Close' }
activityIndicatorProps	Partial<ActivityIndicatorProps> | undefined	—	props for the ActivityIndicator default is { size: 18 }
selectedColor	string | undefined	—	Whether to style the chip color as selected.
selectionBackgroundColor	string | undefined	—	Whether to display overlay on selected chip
loading	boolean | undefined	—	Whether to show the ActivityIndicator or not
leftElementContainerStyle	ViewStyle | undefined	—	left element container style
rightElementContainerStyle	ViewStyle | undefined	—	right element container style
labelStyle	Partial<TextStyle> | undefined	—	label style
stateLayerProps	ViewProps | undefined	—	Pass down testID from chip props to touchable for Detox tests.
containerProps	Omit<ViewProps, "style"> | undefined	—	—
leftElementIconProps	IconProps | undefined	—	—
rightElementIconProps	IconProps | undefined	—	—
backgroundColor	string | undefined	—	—
invertLabelColor	boolean | undefined	—	—

Defined in react-native-molecules/components/Chip