Skip to main content

Chip

A compact element that represents an input, attribute, or action. Chips are commonly used for tags, categories, or selections.

Installation​

import { Chip } from "@/core/components/Chip";

Basic Usage​

import React from "react";
import { Chip } from "@/core/components/Chip";

export default function ChipExample() {
  return <Chip label="React Native" />;
}

Props​

PropTypeDefaultDescription
labelstring-Required. Text to display in the chip
variant"filled" | "outlined""filled"Visual variant of the chip
size"sm" | "md" | "lg""md"Size of the chip
color"primary" | "secondary" | "success" | "warning" | "error""primary"Color variant
onPress() => void-Callback when chip is pressed
onDeletePress() => void-Callback when delete button is pressed
disabledbooleanfalseWhether the chip is disabled
styleStyleProp<ViewStyle>-Additional styles

Usage Examples​

Basic Chips​

<Chip label="Technology" />
<Chip label="Design" variant="outlined" />

Interactive Chips​

<Chip
  label="Removable"
  onDeletePress={() => console.log('Delete pressed')}
/>
<Chip
  label="Clickable"
  onPress={() => console.log('Chip pressed')}
/>

Different Colors​

<Chip label="Primary" color="primary" />
<Chip label="Success" color="success" />
<Chip label="Warning" color="warning" />
<Chip label="Error" color="error" />