# Chip **Category**: native **URL**: https://www.heroui.com/docs/native/components/chip **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/native/components/(data-display)/chip.mdx > Displays a compact element in a capsule shape. *** ## Import ```tsx import { Chip } from 'heroui-native'; ``` ## Anatomy ```tsx ... ``` - **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. ```tsx Basic Chip ``` ### Sizes Control the chip size with the `size` prop. ```tsx Small Medium Large ``` ### Variants Choose between different visual styles with the `variant` prop. ```tsx Primary Secondary Tertiary Soft ``` ### Colors Apply different color themes with the `color` prop. ```tsx Accent Default Success Warning Danger ``` ### With Icons Add icons or custom content alongside text using compound components. ```tsx Featured Close ``` ### Custom Styling Apply custom styles using className or style props. ```tsx Custom ``` ### Disable All Animations Disable all animations including children by using the `"disable-all"` value for the `animation` prop. ```tsx { /* Disable all animations including children */ } No Animations; ``` ## Example ```tsx import { Chip } from 'heroui-native'; import { View, Text } from 'react-native'; import { Ionicons } from '@expo/vector-icons'; export default function ChipExample() { return ( Small Medium Large Primary Success Premium Remove Custom ); } ``` You can find more examples in the [GitHub repository](https://github.com/heroui-inc/heroui-native/blob/main/example/src/app/(home)/components/chip.tsx). ## API Reference ### Chip | 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. ```tsx 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.