Chip
Displays a compact, rounded chip element.
Installation
npx shadcn@latest add @tetra-ui/chipUsage
import { Chip, ChipIcon, ChipText } from "@/components/ui/chip";
import { XIcon } from "@/components/ui/icons";<Chip>Chip</Chip>Variants
<Chip variant="default">Default</Chip>
<Chip variant="secondary">Secondary</Chip>
<Chip variant="destructive">Destructive</Chip>
<Chip variant="outline">Outline</Chip>With icon
Chips are pressable by default. Add a trailing icon for dismissible or actionable chips:
<Chip onPress={() => removeTag(id)}>
<ChipText>React Native</ChipText>
<ChipIcon>
<XIcon />
</ChipIcon>
</Chip>Disabled
Pass disabled to prevent interaction:
<Chip disabled>Unavailable</Chip>