---
metaTitle: Chip component | AwesCode UI
meta:
  - name: description
    content: The <AwChip /> component is used to render Chip - UI Vue component for AwesCode UI.
title: Chip
---

# AwChip

**Category:** Organism | **Import:** Dynamic

The `AwChip` component is a small, compact element used to display labels, tags, or status indicators. It supports icons, images, colors, and custom content slots.

## Overview

`AwChip` provides a flexible chip/tag component with:
- Icon or image decoration
- Color customization
- Filled or outlined styles
- Loading/rotation animation support
- Custom slot support for flexible content
- Functional component for optimal performance

## Usage

### Basic Example

```markup
<AwChip text="Label" />
```

### With Icon

```markup
<AwChip text="Active" icon="awesio/check" color="success" />
```

### With Image

```markup
<AwChip text="User" image="/path/to/avatar.jpg" />
```

### Filled Style

```markup
<AwChip text="Tag" color="accent" filled />
```

### With Loading Animation

```markup
<AwChip text="Processing" icon="progress" :rotate="true" />
```

### Custom Content

```markup
<AwChip>
    <template #left>
        <AwIcon name="star" />
    </template>
    Custom content
    <template #right>
        <AwButton theme="icon" @click="remove">×</AwButton>
    </template>
</AwChip>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| text | Text label | `String` | `false` | `''` |
| icon | Icon name to render in decor element | `String` | `false` | `''` |
| color | Border, icon and close icon color | `String` | `false` | `''` |
| image | Decor element background image URL | `String` | `false` | `''` |
| filled | Indicates if chip has filled background | `Boolean` | `false` | `false` |
| rotate | Toggles rotate animation (for loading icons) | `Boolean` | `false` | `false` |

**Color Options:** Any valid color class (e.g., `'success'`, `'error'`, `'accent'`, `'mono'`)

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Text content | - | Text prop value |
| left | Content on the left side of text | - | Decor element (icon/image) |
| center | Text wrapper | - | Text span |
| right | Content on the right side of text | - | - |

### Events

This component does not emit any events (functional component).

### Config Options

The component has internal config for icon rotation:

```javascript
{
  progress: {
    rotate: true  // Auto-rotate progress icons
  }
}
```

## Related Components

- `AwIcon` - Icon component used in chip decor
- `AwIconSystemMono` - System icon component
- `AwBadge` - Badge component (similar use case)

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as an organism
- Component is functional (stateless) for optimal performance
- Icons are automatically detected as system icons (mono) or regular icons
- When `image` is provided, it's used as background image for decor element
- `filled` prop changes background color instead of border color
- Rotation animation is useful for loading states (e.g., progress spinner)
- Default slot content replaces `text` prop if provided
- Color classes follow Tailwind CSS naming convention