> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Chip

> A chip component for displaying labels, tags, or status indicators

export const ChipUserRolesPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ChipUserRoles" frameBorder="0" width="100%" height="280"></iframe>;

export const ChipPriorityExamplePreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ChipPriorityExample" frameBorder="0" width="100%" height="280"></iframe>;

export const ChipFilterExamplePreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ChipFilterExample" frameBorder="0" width="100%" height="320"></iframe>;

export const ChipTagListPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ChipTagList" frameBorder="0" width="100%" height="320"></iframe>;

export const ChipStatusIndicatorsPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ChipStatusIndicators" frameBorder="0" width="100%" height="300"></iframe>;

export const ChipWithIconsPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ChipWithIcons" frameBorder="0" width="100%" height="280"></iframe>;

export const ChipVariantsOutlinePreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ChipVariantsOutline" frameBorder="0" width="100%" height="280"></iframe>;

export const ChipVariantsTintPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ChipVariantsTint" frameBorder="0" width="100%" height="280"></iframe>;

export const ChipVariantsFilledPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ChipVariantsFilled" frameBorder="0" width="100%" height="280"></iframe>;

export const ChipBasicExamplePreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ChipBasicExample" frameBorder="0" width="100%" height="260"></iframe>;

## Overview

The Chip component displays labels, tags, or status indicators with different variants and colors.

## Basic Usage

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Chip } from '@peppermint-design/devreadykit-custom';

    export default function App() {
      return (
        <Chip variant="filled" color="brand">
          Default Chip
        </Chip>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <ChipBasicExamplePreview />
  </Tab>
</Tabs>

## Variants

### Filled

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    <Chip variant="filled" color="brand">Brand</Chip>
    <Chip variant="filled" color="danger">Danger</Chip>
    <Chip variant="filled" color="warning">Warning</Chip>
    <Chip variant="filled" color="success">Success</Chip>
    <Chip variant="filled" color="important">Important</Chip>
    ```
  </Tab>

  <Tab title="Preview">
    <ChipVariantsFilledPreview />
  </Tab>
</Tabs>

### Tint

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    <Chip variant="tint" color="brand">Brand</Chip>
    <Chip variant="tint" color="danger">Danger</Chip>
    <Chip variant="tint" color="warning">Warning</Chip>
    <Chip variant="tint" color="success">Success</Chip>
    <Chip variant="tint" color="important">Important</Chip>
    ```
  </Tab>

  <Tab title="Preview">
    <ChipVariantsTintPreview />
  </Tab>
</Tabs>

### Outline

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    <Chip variant="outline" color="brand">Brand</Chip>
    <Chip variant="outline" color="danger">Danger</Chip>
    <Chip variant="outline" color="warning">Warning</Chip>
    <Chip variant="outline" color="success">Success</Chip>
    <Chip variant="outline" color="important">Important</Chip>
    ```
  </Tab>

  <Tab title="Preview">
    <ChipVariantsOutlinePreview />
  </Tab>
</Tabs>

## With Icons

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Check } from '@/assets/icons/check';
    import { Warning } from '@/assets/icons/warning';
    import { Close } from '@/assets/icons/close';

    const InfoIcon = () => (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="12" cy="12" r="10" />
        <line x1="12" y1="16" x2="12" y2="12" />
        <circle cx="12" cy="8" r="1" />
      </svg>
    );

    <Chip variant="filled" color="success" icon={<Check />}>
      Verified
    </Chip>

    <Chip variant="tint" color="warning" icon={<Warning />}>
      Pending
    </Chip>

    <Chip variant="outline" color="danger" icon={<Close />}>
      Failed
    </Chip>

    <Chip variant="filled" color="brand" icon={<InfoIcon />}>
      Information
    </Chip>
    ```
  </Tab>

  <Tab title="Preview">
    <ChipWithIconsPreview />
  </Tab>
</Tabs>

## Props

| Prop      | Type                                                           | Default | Description            |
| :-------- | :------------------------------------------------------------- | :------ | :--------------------- |
| variant   | `"filled" \| "tint" \| "outline"`                              | —       | Visual style variant   |
| color     | `"brand" \| "danger" \| "warning" \| "success" \| "important"` | —       | Color theme            |
| icon      | `React.ReactNode`                                              | —       | Icon to display        |
| children  | `React.ReactNode`                                              | —       | Chip content           |
| className | `string`                                                       | —       | Additional CSS classes |

## Examples

### Filter Chips

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Close } from '@/assets/icons/close';

    function FilterChips({ filters, onRemove }) {
      return (
        <div className="flex flex-wrap gap-2">
          {filters.map(filter => (
            <Chip 
              key={filter.key}
              variant="filled" 
              color="brand"
              icon={<X />}
              onClick={() => onRemove(filter.key)}
            >
              {filter.label}
            </Chip>
          ))}
        </div>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <ChipFilterExamplePreview />
  </Tab>
</Tabs>