Chip

Import

import { Chip } from 'heroui-native';

Anatomy

<Chip>
  <Chip.Label>...</Chip.Label>
</Chip>

Chip: Main container that displays a compact element
Chip.Label: Text content of the chip

Usage

Basic Usage

The Chip component displays text or custom content in a capsule shape.

<Chip>Basic Chip</Chip>

Sizes

Control the chip size with the size prop.

<Chip size="sm">Small</Chip>
<Chip size="md">Medium</Chip>
<Chip size="lg">Large</Chip>

Variants

Choose between different visual styles with the variant prop.

<Chip variant="primary">Primary</Chip>
<Chip variant="secondary">Secondary</Chip>
<Chip variant="tertiary">Tertiary</Chip>
<Chip variant="soft">Soft</Chip>

Colors

Apply different color themes with the color prop.

<Chip color="accent">Accent</Chip>
<Chip color="default">Default</Chip>
<Chip color="success">Success</Chip>
<Chip color="warning">Warning</Chip>
<Chip color="danger">Danger</Chip>

With Icons

Add icons or custom content alongside text using compound components.

<Chip>
  <Icon name="star" size={12} />
  <Chip.Label>Featured</Chip.Label>
</Chip>

<Chip>
  <Chip.Label>Close</Chip.Label>
  <Icon name="close" size={12} />
</Chip>

Custom Styling

Apply custom styles using className or style props.

<Chip className="bg-purple-600 px-6">
  <Chip.Label className="text-white">Custom</Chip.Label>
</Chip>

Disable All Animations

Disable all animations including children by using the "disable-all" value for the animation prop.

{
  /* Disable all animations including children */
}
<Chip animation="disable-all">No Animations</Chip>;

Example

import { Chip } from 'heroui-native';
import { View, Text } from 'react-native';
import { Ionicons } from '@expo/vector-icons';

export default function ChipExample() {
  return (
    <View className="gap-4 p-4">
      <View className="flex-row flex-wrap gap-2">
        <Chip size="sm">Small</Chip>
        <Chip size="md">Medium</Chip>
        <Chip size="lg">Large</Chip>
      </View>

      <View className="flex-row flex-wrap gap-2">
        <Chip variant="primary" color="accent">
          Primary
        </Chip>
        <Chip variant="secondary" color="success">
          <View className="size-1.5 rounded-full bg-success" />
          <Chip.Label>Success</Chip.Label>
        </Chip>
        <Chip variant="tertiary" color="warning">
          <Ionicons name="star" size={12} color="#F59E0B" />
          <Chip.Label>Premium</Chip.Label>
        </Chip>
      </View>

      <View className="flex-row gap-2">
        <Chip variant="secondary">
          <Chip.Label>Remove</Chip.Label>
          <Ionicons name="close" size={14} color="#6B7280" />
        </Chip>
        <Chip className="bg-purple-600">
          <Chip.Label className="text-white font-semibold">Custom</Chip.Label>
        </Chip>
      </View>
    </View>
  );
}

API Reference

prop	type	default	description
`children`	`React.ReactNode`	-	Content to render inside the chip
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the chip
`variant`	`'primary' \| 'secondary' \| 'tertiary' \| 'soft'`	`'primary'`	Visual variant of the chip
`color`	`'accent' \| 'default' \| 'success' \| 'warning' \| 'danger'`	`'accent'`	Color theme of the chip
`className`	`string`	-	Additional CSS classes to apply
`animation`	`"disable-all" \| undefined`	`undefined`	Animation configuration. Use `"disable-all"` to disable all animations including children
`...PressableProps`	`PressableProps`	-	All Pressable props are supported

Chip.Label

prop	type	default	description
`children`	`React.ReactNode`	-	Text or content to render as the label
`className`	`string`	-	Additional CSS classes to apply
`...TextProps`	`TextProps`	-	All standard Text props are supported

Hooks

useChip

Hook to access the Chip context values. Returns the chip's size, variant, and color.

import { useChip } from 'heroui-native';

const { size, variant, color } = useChip();

Return Value

property	type	description
`size`	`'sm' \| 'md' \| 'lg'`	Size of the chip
`variant`	`'primary' \| 'secondary' \| 'tertiary' \| 'soft'`	Visual variant of the chip
`color`	`'accent' \| 'default' \| 'success' \| 'warning' \| 'danger'`	Color theme of the chip

Note: This hook must be used within a Chip component. It will throw an error if called outside of the chip context.

Chip

On this page