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	—	—
onPress	(((event: GestureResponderEvent) => void) & ((e: GestureResponderEvent) => void) & ((e: GestureResponderEvent) => void)) | undefined	—	—
disabled	boolean | undefined	—	—
labelRequired	string	—	—
labelCharacterLimit	number | undefined	—	—
variant	"outlined" | "elevated" | undefined	—	—
size	"sm" | "md" | undefined	—	—
onClose	(() => void) | undefined	—	—
elevation	MD3Elevation | undefined	—	—
selected	boolean | undefined	—	—
closeIconProps	Partial<IconButtonProps> | undefined	—	—
activityIndicatorProps	Partial<ActivityIndicatorProps> | undefined	—	—
selectedColor	string | undefined	—	—
selectionBackgroundColor	string | undefined	—	—
loading	boolean | undefined	—	—
containerStyle	ViewStyle | undefined	—	—
leftElementContainerStyle	ViewStyle | undefined	—	—
rightElementContainerStyle	ViewStyle | undefined	—	—
labelStyle	Partial<TextStyle> | undefined	—	—
stateLayerProps	ViewProps | undefined	—	—
containerProps	Omit<ViewProps, "style"> | undefined	—	—
leftElementIconProps	IconProps | undefined	—	—
rightElementIconProps	IconProps | undefined	—	—
backgroundColor	string | undefined	—	—
invertLabelColor	boolean | undefined	—	—

Defined in react-native-molecules/components/Chip