Chip

A compact, interactive element that represents an input, attribute, or action. Chips are commonly used for tags, filters, or selections.

Installation

npx shadcn@latest add chip

Usage

import { Chip } from "@hoag/ui/components/chip";
 
export default function Demo() {
  return <Chip tag="React" />;
}

Default

<Chip tag="React" />
<Chip tag="TypeScript" />
<Chip tag="Next.js" />

Sizes

Chip supports four different sizes: sm, default, lg, and circle.

<Chip size="sm" tag="Small" />
<Chip size="default" tag="Default" />
<Chip size="lg" tag="Large" />
<Chip size="circle" tag="A" />

Status

Chips can have different statuses to indicate their state: default, active, destructive, and disable.

<Chip status="default" tag="Default" />
<Chip status="active" tag="Active" />
<Chip status="destructive" tag="Destructive" />
<Chip status="disable" tag="Disabled" />

With Icons

Add icons to the left or right side of the chip.

Left Icon

import { Chip } from "@hoag/ui/components/chip";
import { User, Star, Plus } from "lucide-react";
 
<Chip leftIcon={<User className="h-4 w-4" />} tag="User" />
<Chip leftIcon={<Star className="h-4 w-4" />} tag="Favorite" status="active" />
<Chip leftIcon={<Plus className="h-4 w-4" />} tag="Add Tag" />

Right Icon

import { Chip } from "@hoag/ui/components/chip";
import { X } from "lucide-react";
 
<Chip tag="Removable" rightIcon={<X className="h-4 w-4" />} />
<Chip tag="JavaScript" rightIcon={<X className="h-4 w-4" />} status="active" />

Both Icons

import { Chip } from "@hoag/ui/components/chip";
import { User, X } from "lucide-react";
 
<Chip
  leftIcon={<User className="h-4 w-4" />}
  tag="Admin"
  rightIcon={<X className="h-4 w-4" />}
  status="active"
/>

With Badge

Add a badge component to display additional information.

<Chip
  tag="Notifications"
  badgeComponent={
    <span className="flex h-5 w-5 items-center justify-center rounded-full bg-primary text-[10px] text-primary-foreground">
      5
    </span>
  }
/>

Interactive Example

Chips can be used as interactive elements with onClick handlers.

<Chip
  tag="Click me"
  onClick={() => alert("Chip clicked!")}
/>
 
<Chip
  tag="Remove"
  status="active"
  rightIcon={<X className="h-4 w-4" />}
  onClick={(e) => {
    e.currentTarget.remove();
  }}
/>

Custom Element

Use the as prop to render the chip as a different element (e.g., a, div).

Link Chip

Div Chip

<Chip as="a" href="#" tag="Link Chip" />
<Chip as="div" tag="Div Chip" status="active" />

API Reference

Props

Prop	Type	Default	Description
`tag`	`React.ReactNode`	-	Required. The content to display in the chip
`size`	`"sm" \| "default" \| "lg" \| "circle"`	`"default"`	The size of the chip
`status`	`"default" \| "active" \| "destructive" \| "disable"`	`"default"`	The status/state of the chip
`leftIcon`	`React.ReactNode`	-	Icon to display on the left side
`rightIcon`	`React.ReactNode`	-	Icon to display on the right side
`badgeComponent`	`React.ReactNode`	-	Badge component to display
`as`	`string`	`"button"`	The element type to render as
`className`	`string`	-	Additional CSS classes
`onClick`	`MouseEventHandler`	-	Click handler function

Accessibility

Chips are rendered as <button> elements by default, making them keyboard accessible
Use the as prop to render as different elements when needed
Disabled chips have cursor-not-allowed and opacity-60 applied
Always provide meaningful tag content for screen readers

Popover Wrapper Select