# Chip **Category**: react **URL**: https://www.heroui.com/docs/react/components/chip **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/components/(data-display)/chip.mdx > Small informational badges for displaying labels, statuses, and categories *** ## Import ```tsx import { Chip } from '@heroui/react'; ``` ## Anatomy Import the Chip component and access all parts using dot notation. > Plain-text children are automatically wrapped in ``. ```tsx Label text ``` ### Usage ```tsx import {Chip} from "@heroui/react"; export function ChipBasic() { return (
Default Accent Success Warning Danger
); } ``` ### Variants ```tsx import {CircleDashed} from "@gravity-ui/icons"; import {Chip, Separator} from "@heroui/react"; import React from "react"; export function ChipVariants() { const sizes = ["lg", "md", "sm"] as const; const variants = ["primary", "secondary", "tertiary", "soft"] as const; const colors = ["accent", "default", "success", "warning", "danger"] as const; return (
{sizes.map((size, index) => (

{size}

{/* Color labels header */}
{colors.map((color) => (
{color}
))}
{variants.map((variant) => (
{variant}
{colors.map((color) => (
Label
))}
))}
{index < sizes.length - 1 && } ))}
); } ``` ### With Icons ```tsx import {ChevronDown, CircleCheckFill, CircleFill, Clock, Xmark} from "@gravity-ui/icons"; import {Chip} from "@heroui/react"; export function ChipWithIcon() { return (
Information Completed Pending Failed Label
); } ``` ### Statuses ```tsx import {Ban, Check, CircleFill, CircleInfo, TriangleExclamation} from "@gravity-ui/icons"; import {Chip} from "@heroui/react"; export function ChipStatuses() { return (
Default Active Pending Inactive
New Feature Available Beta Deprecated
); } ``` ## Related Components - **Avatar**: Display user profile images - **CloseButton**: Button for dismissing overlays - **Separator**: Visual divider between content ## Styling ### Passing Tailwind CSS classes You can style the root container and individual slots: ```tsx import {Chip} from '@heroui/react'; function CustomChip() { return ( Custom Styled ); } ``` ### Customizing the component classes To customize the Chip component classes, you can use the `@layer components` directive.
[Learn more](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes). ```css @layer components { .chip { @apply rounded-full text-xs; } .chip__label { @apply font-medium; } .chip--accent { @apply border-accent/20; } .chip--accent .chip__label { @apply text-accent; } } ``` HeroUI follows the [BEM](https://getbem.com/) methodology to ensure component variants and states are reusable and easy to customize. ### CSS Classes The Chip component uses these CSS classes ([View source styles](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/chip.css)): #### Base Classes - `.chip` - Base chip container styles - `.chip__label` - Label text slot styles #### Color Classes - `.chip--accent` - Accent color variant - `.chip--danger` - Danger color variant - `.chip--default` - Default color variant - `.chip--success` - Success color variant - `.chip--warning` - Warning color variant #### Variant Classes - `.chip--primary` - Primary variant with filled background - `.chip--secondary` - Secondary variant with border - `.chip--tertiary` - Tertiary variant with transparent background - `.chip--soft` - Soft variant with lighter background #### Size Classes - `.chip--sm` - Small size - `.chip--md` - Medium size (default) - `.chip--lg` - Large size #### Compound Variant Classes Chips support combining variant and color classes (e.g., `.chip--secondary.chip--accent`). The following combinations have default styles defined: **Primary Variants:** - `.chip--primary.chip--accent` - Primary accent combination with filled background - `.chip--primary.chip--success` - Primary success combination with filled background - `.chip--primary.chip--warning` - Primary warning combination with filled background - `.chip--primary.chip--danger` - Primary danger combination with filled background **Soft Variants:** - `.chip--accent.chip--soft` - Soft accent combination with lighter background - `.chip--success.chip--soft` - Soft success combination with lighter background - `.chip--warning.chip--soft` - Soft warning combination with lighter background - `.chip--danger.chip--soft` - Soft danger combination with lighter background **Note:** You can apply custom styles to any variant-color combination (e.g., `.chip--secondary.chip--accent`, `.chip--tertiary.chip--success`) using the `@layer components` directive in your CSS. ## API Reference ### Chip Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `children` | `React.ReactNode` | - | Content to display inside the chip | | `className` | `string` | - | Additional CSS classes for the root element | | `color` | `"default" \| "accent" \| "success" \| "warning" \| "danger"` | `"default"` | Color variant of the chip | | `variant` | `"primary" \| "secondary" \| "tertiary" \| "soft"` | `"secondary"` | Visual style variant | | `size` | `"sm" \| "md" \| "lg"` | `"md"` | Size of the chip | ### Chip.Label Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `children` | `React.ReactNode` | - | Label text content | | `className` | `string` | - | Additional CSS classes for the label slot |