# Chip **Category**: react **URL**: https://www.heroui.com/docs/react/migration/chip **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/migration/(components)/chip.mdx > Migration guide for Chip from HeroUI v2 to v3 *** Refer to the [v3 Chip documentation](/docs/react/components/chip) for complete API reference, styling guide, and advanced examples. This guide only focuses on migrating from HeroUI v2. ## Key Changes ### 1. Variants **v2:** `solid`, `bordered`, `light`, `flat`, `faded`, `shadow`, `dot` **v3:** `primary`, `secondary`, `tertiary`, `soft` ### 2. Colors **v2:** `default`, `primary`, `secondary`, `success`, `warning`, `danger` **v3:** `default`, `accent`, `success`, `warning`, `danger` ### 3. Compound Component Pattern v3 introduces a compound component pattern with the `Chip.Label` subcomponent: - **`Chip.Label`** -- Renders the label text inside the chip. Plain-text children are automatically wrapped in ``, so explicit usage is optional but available for custom styling. ```tsx {/* Implicit label -- plain text is auto-wrapped in Chip.Label */} Badge {/* Explicit label -- useful when you need a custom className */} Badge ``` ### 4. Size Variants **v2:** `sm`, `md`, `lg` (via the `size` prop) **v3:** `sm`, `md`, `lg` (via the `size` prop -- same API) The available sizes remain the same, but v3 applies them through BEM-style CSS classes (`chip--sm`, `chip--md`, `chip--lg`). The default size is `md`. ```tsx Small Medium (default) Large ``` ### 5. Compound Variant Classes v3 supports combining variant and color classes for precise styling. These compound classes have default styles defined in the CSS: **Primary variant combinations:** `.chip--primary.chip--accent`, `.chip--primary.chip--success`, `.chip--primary.chip--warning`, `.chip--primary.chip--danger` **Soft variant combinations:** `.chip--accent.chip--soft`, `.chip--success.chip--soft`, `.chip--warning.chip--soft`, `.chip--danger.chip--soft` You can also target any other combination (e.g., `.chip--secondary.chip--accent`) via the `@layer components` directive in your CSS. ### 6. Prop Changes | v2 Prop | v3 Location | Notes | |---------|-------------|-------| | `radius` | - | Removed (use Tailwind e.g. `rounded-full`) | | `avatar` | - | Use children (e.g. `` as first child) | | `startContent`, `endContent` | - | Use children directly | | `onClose` | - | Implement close manually (e.g. `CloseButton`) | | `classNames` | - | Use `className` | | `isDisabled` | - | Use conditional rendering or Tailwind (e.g. `opacity-50`) | ### 7. Variant Mapping | v2 Variant | v3 Equivalent | Notes | |-----------|---------------|-------| | `solid` | `primary` | Filled background | | `bordered` | `secondary` | Border with transparent background | | `light` | `soft` | Light background | | `flat` | `tertiary` | Transparent background | | `faded` | `secondary` | Similar appearance | | `shadow` | `primary` | Use Tailwind `shadow-*` classes | | `dot` | - | Not available, implement manually | ### 8. Color Mapping | v2 Color | v3 Equivalent | Notes | |---------|---------------|-------| | `default` | `default` | Same | | `primary` | `accent` | Renamed | | `secondary` | `default` or `accent` | Depends on context | | `success` | `success` | Same | | `warning` | `warning` | Same | | `danger` | `danger` | Same | ## Structure Changes In v2, `Chip` was a component that accepted various props for styling: ```tsx import { Chip } from "@heroui/react"; export default function App() { return Chip; } ``` In v3, `Chip` has a simplified API with fewer variants: ```tsx import { Chip } from "@heroui/react"; export default function App() { return Chip; } ``` ## Migration Examples ### Variants and Colors ```tsx {/* Variants */} Solid Bordered Light {/* Colors */} Primary Success ``` ```tsx {/* Variants */} Primary Secondary Soft {/* Colors */} Accent Success ``` ### With Icons ```tsx import { Icon } from "@iconify/react"; {/* Start content */} }> Chip {/* End content */} }> Chip ``` ```tsx import { Icon } from "@iconify/react"; {/* Start content */} Chip {/* End content */} Chip ``` ### With Avatar ```tsx import { Avatar } from "@heroui/react"; } variant="flat" > Avatar ``` ```tsx import { Avatar, Chip } from "@heroui/react"; JW Avatar ``` ### With Close Button ```tsx console.log("close")}> Chip ``` ```tsx import { CloseButton } from "@heroui/react"; Chip console.log("close")} /> ``` ### Removed Variants ```tsx {/* Dot variant */} Dot {/* Shadow variant */} Shadow ``` ```tsx import { Icon } from "@iconify/react"; {/* Dot variant - implement manually */} Dot {/* Shadow variant - use Tailwind classes */} Shadow ``` ## Styling Changes ### v2: `classNames` Prop ```tsx ``` ### v3: Direct `className` Prop ```tsx {/* Content with custom classes */} Chip ``` ## Summary 1. **Variants Reduced**: From 7 variants to 4 variants 2. **Color Changes**: `primary` → `accent`, `secondary` removed 3. **Compound Component**: `Chip.Label` subcomponent added; plain-text children are auto-wrapped 4. **Size Variants**: `sm`, `md`, `lg` remain available via the `size` prop, now applied as BEM classes (`chip--sm`, `chip--md`, `chip--lg`) 5. **Compound Variant Classes**: Variant + color combinations (e.g., `.chip--primary.chip--accent`, `.chip--soft.chip--success`) have built-in styles and are customizable via `@layer components` 6. **Radius Removed**: Use Tailwind CSS classes instead 7. **Avatar Prop Removed**: Use children directly 8. **Start/End Content Removed**: Use children directly 9. **Close Button Removed**: Implement manually with `CloseButton` component 10. **Dot Variant Removed**: Implement manually with icon 11. **Shadow Variant Removed**: Use Tailwind `shadow-*` classes 12. **Disabled Prop Removed**: Use conditional rendering or CSS classes 13. **ClassNames Removed**: Use `className` prop directly