Chip

Chip provides interactive filter, selection, and action chips with animated check state and close button support. Also exported as Tag alias.

Usage

ChipExample.tsx

import { useState } from 'react';
import { Chip } from '@masumdev/rn-ui';

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

  return (
    <Chip
      label="React Native"
      selected={selected}
      onSelect={setSelected}
      variant="soft"
      tone="primary"
    />
  );
}

Variants

• filled - Solid background when selected
• outline - Border-only chip
• soft - Subtle tinted background (default)

Props API

Prop	Type	Default	Description
label*	string	—	Text label displayed inside the chip.
selected	boolean	false	Controlled selection state.
onSelect	(selected: boolean) => void	—	Toggle callback when chip is pressed.
onClose	() => void	—	Close/dismiss callback. Renders an X button when provided.
icon	RenderIcon	—	Leading icon element.
rightIcon	RenderIcon	—	Trailing icon element.
variant	"filled" | "outline" | "soft"	"soft"	Visual style variant.
size	ComponentSize	"md"	Chip size (sm, md, lg).
tone	ComponentTone	"primary"	Color tone.
disabled	boolean	false	Disable interaction.
hapticFeedback	boolean	true	Enable haptic feedback on press.