Skip to main content

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.

​
Overview

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

​
Basic Usage

import { Chip } from '@peppermint-design/devreadykit-custom';

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

​
Variants

​
Filled

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

​
Tint

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

​
Outline

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

​
With Icons

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>

​
Props

PropTypeDefaultDescription
variant"filled" | "tint" | "outline"—Visual style variant
color"brand" | "danger" | "warning" | "success" | "important"—Color theme
iconReact.ReactNode—Icon to display
childrenReact.ReactNode—Chip content
classNamestring—Additional CSS classes

​
Examples

​
Filter Chips

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>
  );
}