# Chip · HeroUI

> Small informational badges for displaying labels, statuses, and categories

- Page: https://jiguang132.com/systems/heroui/docs/components/chip
- Based on: HeroUI documentation (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af

## 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
<Chip>
  Label text
</Chip>
```

### Usage


> Example `chip-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/chip


### Variants


> Example `chip-variants`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/chip


### With Icons


> Example `chip-with-icon`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/chip


### Statuses


> Example `chip-statuses`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/chip


## Styling

### Passing Tailwind CSS classes

You can style the root container and individual slots:

```tsx
import {Chip} from '@heroui/react';

function CustomChip() {
  return (
    <Chip className="rounded-full px-4 py-2 font-bold">
      <Chip.Label className="text-lg uppercase">
        Custom Styled
      </Chip.Label>
    </Chip>
  );
}
```

### 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 |

---

Index of all JGuang resources: https://jiguang132.com/llms.txt