Chip

PreviousNext

A circular badge component that displays icons, typically used for status indicators, tags, or interactive elements

'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

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

Usage

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

PropTypeDefaultDescription
colorColors"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".
sizestring"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.
classNamestringundefinedAdditional CSS classes to apply to the chip.
childrenReactNodeundefinedThe content to display inside the chip, typically an icon.
iconIconicNamesundefinedThe icon to display inside the chip.
iconWidthstring"24px"The width of the icon inside the chip.
rotationnumberundefinedThe 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