# Badge **Category**: react **URL**: https://www.heroui.com/docs/react/migration/badge **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/migration/(components)/badge.mdx > Migration guide for Badge from HeroUI v2 to v3 *** Refer to the [v3 Badge documentation](/docs/react/components/badge) for complete API reference, styling guide, and advanced examples. This guide only focuses on migrating from HeroUI v2. ## Structure Changes In v2, `Badge` was a wrapper component that positioned content relative to its children: ```tsx import { Badge, Avatar } from "@heroui/react"; export default function App() { return ( ); } ``` In v3, Badge uses a compound component pattern with `Badge.Anchor` for positioning: ```tsx import { Badge, Avatar } from "@heroui/react"; export default function App() { return ( U 5 ); } ``` ## Key Changes ### 1. Component Structure **v2:** Single `Badge` component wrapping children, with `content` prop for badge text **v3:** Compound components: `Badge.Anchor` (positioning wrapper), `Badge` (the badge itself), `Badge.Label` (text slot, auto-wrapped for strings) ### 2. Variants **v2:** `solid`, `flat`, `faded`, `shadow` **v3:** `primary`, `secondary`, `soft` ### 3. Colors **v2:** `default`, `primary`, `secondary`, `success`, `warning`, `danger` **v3:** `default`, `accent`, `success`, `warning`, `danger` ### 4. Prop Changes | v2 Prop | v3 Location | Notes | |---------|-------------|-------| | `content` | `Badge` children | Content is now passed as children | | `children` | `Badge.Anchor` | The anchored element goes inside `Badge.Anchor` | | `variant` | `Badge` | Values changed (see variant mapping) | | `color` | `Badge` | `primary` → `accent`, `secondary` removed | | `size` | `Badge` | Same (`sm`, `md`, `lg`) | | `placement` | `Badge` | Same (`top-right`, `top-left`, `bottom-right`, `bottom-left`) | | `shape` | - | Removed (use Tailwind CSS) | | `showOutline` | - | Removed (use Tailwind CSS e.g. `border-2`) | | `disableOutline` | - | Removed | | `disableAnimation` | - | Removed | | `isInvisible` | - | Removed (use conditional rendering) | | `isOneChar` | - | Removed (use Tailwind CSS) | | `isDot` | - | Omit children to render as dot | | `classNames` | - | Use `className` on individual components | ### 5. Variant Mapping | v2 Variant | v3 Equivalent | Notes | |-----------|---------------|-------| | `solid` | `primary` | Filled background | | `flat` | `soft` | Light background | | `faded` | `secondary` | Border with background | | `shadow` | `primary` | Use Tailwind `shadow-*` classes | ### 6. 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 | ## Migration Examples ### Basic Badge ```tsx import { Badge, Avatar } from "@heroui/react"; ``` ```tsx import { Badge, Avatar } from "@heroui/react"; U 5 ``` ### Dot Badge ```tsx ``` ```tsx U ``` ### Placement ```tsx ``` ```tsx U 5 ``` ### Visibility Toggle ```tsx const [isInvisible, setIsInvisible] = useState(false); ``` ```tsx const [isVisible, setIsVisible] = useState(true); U {isVisible && 5} ``` ### With Icon Content ```tsx import { Icon } from "@iconify/react"; } color="success"> ``` ```tsx import { Icon } from "@iconify/react"; U ``` ## Styling Changes ### v2: `classNames` Prop ```tsx ``` ### v3: Direct `className` Props ```tsx 5 ``` ## Component Anatomy The v3 Badge follows this structure: ``` Badge.Anchor (positioning wrapper) ├── [Anchored element: Avatar, Button, etc.] └── Badge (the badge indicator) └── Badge.Label (auto-wrapped for string/number children) ``` ## Summary 1. **Component Structure**: `Badge` wrapping children → `Badge.Anchor` + `Badge` as siblings 2. **Content Prop Removed**: `content` prop → pass content as `Badge` children 3. **Dot Badge**: `isDot` prop → omit children 4. **Visibility**: `isInvisible` prop → conditional rendering 5. **Variants Reduced**: From 4 to 3 variants (`primary`, `secondary`, `soft`) 6. **Color Changes**: `primary` → `accent`, `secondary` removed 7. **Removed Props**: `shape`, `showOutline`, `disableAnimation`, `isOneChar` — use Tailwind CSS 8. **ClassNames Removed**: Use `className` on individual compound components