---
title: Chip
description: A circular badge component that displays icons, typically used for status indicators, tags, or interactive elements
---

```tsx
'use client';

import { Chip } from '@/ui/Chip';
import { Icon } from '@clubmed/trident-icons';

export function ChipDemo() {
  return (
    <Chip color="sienna" size="size-32" theme="solid">
      <Icon name="Error" width="16px" />
    </Chip>
  );
}
```

## Installation

Using the CLI:

```bash
npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/chip.json
```

Or manually, copy the following code into `/ui/chip.tsx`:

```tsx
'use client';

import clsx from 'clsx';
import type { ComponentPropsWithoutRef } from 'react';

import { getTheme, type Theme } from './Chip.themes';

import type { Colors } from './types/Colors';
import { Icon, type IconicNames, type IconProps } from '@clubmed/trident-icons';

export interface ChipProps extends ComponentPropsWithoutRef<'span'> {
  color?: Colors;
  icon?: IconicNames;
  iconWidth?: IconProps['width'];
  rotation?: IconProps['rotation'];
  size?: string;
  theme?: Theme;
}

export const Chip = ({
  className,
  color = 'sienna',
  icon,
  iconWidth = '24px',
  rotation,
  size = 'size-32',
  theme = 'solid',
  children,
  ...attrs
}: ChipProps) => {
  const { thRoot } = getTheme(theme, { color });

  return (
    <span
      {...attrs}
      className={clsx(
        'inline-flex aspect-square shrink-0 items-center justify-center overflow-hidden rounded-full border',
        size,
        thRoot,
        className,
      )}
      data-name="Chip"
    >
      {children && children}
      {icon && <Icon name={icon} rotation={rotation} width={iconWidth} />}
    </span>
  );
};
```

## Usage

```tsx showLineNumbers
import { Chip } from '@/docs/lib/ui/chip';
import { Icon } from '@clubmed/trident-icons';

export function Component() {
  return (
    <Chip color="sienna" size="size-32" theme="solid">
      <Icon name="AEXC_Fill" width="16px" />
    </Chip>
  );
}
```

## API Reference

### Chip

| Prop        | Type                                        | Default     | Description                                                                                                                                                                                                                                                      |
| ----------- | ------------------------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `color`     | `Colors`                                    | `"sienna"`  | The color of the chip. Available colors: `"black"`, `"darkGrey"`, `"green"`, `"lavender"`, `"lightGrey"`, `"lightSand"`, `"marygold"`, `"orange"`, `"red"`, `"saffron"`, `"sand"`, `"sienna"`, `"ultramarine"`, `"verdigris"`, `"wave"`, `"white"`, `"current"`. |
| `size`      | `string`                                    | `"size-32"` | The size of the chip in pixels. Common values include `"size-32"`, `"size-40"`, `"size-48"`, etc. Uses Tailwind's size utilities.                                                                                                                                |
| `theme`     | `"solid" \| "outline" \| "light" \| "dark"` | `"solid"`   | The visual theme of the chip. `"solid"` fills with the specified color, `"outline"` creates a transparent background with colored border and text, `"light"` applies a light sand background, and `"dark"` applies an ultramarine background.                    |
| `className` | `string`                                    | `undefined` | Additional CSS classes to apply to the chip.                                                                                                                                                                                                                     |
| `children`  | `ReactNode`                                 | `undefined` | The content to display inside the chip, typically an icon.                                                                                                                                                                                                       |
| `icon`  | `IconicNames`                                 | `undefined` | The icon to display inside the chip.                                                                                                                                                                                                                             |
| `iconWidth`  | `string`                                 | `"24px"` | The width of the icon inside the chip.                                                                                                                                                                                                                             |
| `rotation`  | `number`                                 | `undefined` | The rotation of the icon inside the chip.                                                                                                                                                                                                                             |

## Notes

- The Chip component is designed to be perfectly circular with an `aspect-square` ratio
- The component includes a hover effect (`hocus:bg-saffron`) that changes the background to saffron on hover or focus
- When using the `"light"` or `"dark"` theme, the `color` prop is ignored as these themes have predefined colors
- The chip is rendered as a `<span>` element and accepts all standard span HTML attributes
- The component uses the `data-name="Chip"` attribute for testing and debugging purposes