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 mark the chip as disabled for accessibility (accessibilityState). It does not currently block presses or change styles:
<Chip disabled>Unavailable</Chip>API Reference
Chip
Extends React Native Pressable props. String children are wrapped in ChipText automatically.
Prop
Type
ChipText
Renders chip label text styled from the parent Chip context.
Prop
Type
ChipIcon
Clones a single child icon with size and color from the parent Chip context.
Prop
Type