Introduction

Chips are compact elements used to represent inputs, attributes, or actions. They support icons, avatars, dismissible behavior, and multiple visual styles.

Installation

import { Chip } from '@/components/ui/chip';

Usage

<Chip>Label</Chip>

Examples

Default

Label

ChipDefault

import { Chip } from '@/components/ui/chip';

export default function Component() {
  return <Chip>Label</Chip>;
}

Variants

Filled

Outlined

Tonal

ChipVariants

import { Chip } from '@/components/ui/chip';

export default function Component() {
  return (
    <div className="flex flex-wrap gap-2">
      <Chip variant="filled">Filled</Chip>
      <Chip variant="outlined">Outlined</Chip>
      <Chip variant="tonal">Tonal</Chip>
    </div>
  );
}

Themes

Primary

Secondary

Success

Danger

Warning

Info

Neutral

ChipThemes

import { Chip } from '@/components/ui/chip';

export default function Component() {
  return (
    <div className="flex flex-wrap gap-2">
      <Chip theme="primary">Primary</Chip>
      <Chip theme="secondary">Secondary</Chip>
      <Chip theme="success">Success</Chip>
      <Chip theme="danger">Danger</Chip>
      <Chip theme="warning">Warning</Chip>
    </div>
  );
}

Sizes

Small

Medium

Large

ChipSizes

import { Chip } from '@/components/ui/chip';

export default function Component() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Chip size="sm">Small</Chip>
      <Chip size="md">Medium</Chip>
      <Chip size="lg">Large</Chip>
    </div>
  );
}

With Icon

Use the icon prop to add a leading icon.

Favourite

Approved

User

ChipWithIcon

import { Check, Star, User } from 'lucide-react';
import { Chip } from '@/components/ui/chip';

export default function Component() {
  return (
    <div className="flex flex-wrap gap-2">
      <Chip icon={<Star />}>Favourite</Chip>
      <Chip icon={<Check />} theme="success">Approved</Chip>
      <Chip icon={<User />} theme="secondary">User</Chip>
    </div>
  );
}

Dismissible

Pass an onDismiss callback to show a close button.

Dismissible

Approved

ChipDismissible

import { Check } from 'lucide-react';
import { Chip } from '@/components/ui/chip';

export default function Component() {
  return (
    <div className="flex flex-wrap gap-2">
      <Chip onDismiss={() => {}}>Dismissible</Chip>
      <Chip onDismiss={() => {}} theme="danger">Remove</Chip>
      <Chip onDismiss={() => {}} theme="success" icon={<Check />}>Approved</Chip>
    </div>
  );
}

Disabled

Disabled Filled

ChipDisabled

import { Chip } from '@/components/ui/chip';

export default function Component() {
  return (
    <div className="flex flex-wrap gap-2">
      <Chip disabled>Disabled</Chip>
      <Chip disabled variant="filled">Disabled Filled</Chip>
    </div>
  );
}

Selectable

Chips can be toggled into a selected state for use in filter or choice scenarios.

React

Vue

Angular

Svelte

ChipSelectable

'use client';

import { Check, Star, User } from 'lucide-react';
import { useState } from 'react';

import { Chip } from '@/components/ui/chip';

/** No-op callback for demo purposes. */
const noop = () => {};

export function ChipDefault() {
  return <Chip>Label</Chip>;
}

export function ChipVariants() {
  return (
    <div className='flex flex-wrap gap-2'>
      <Chip variant='filled'>Filled</Chip>
      <Chip variant='outlined'>Outlined</Chip>
      <Chip variant='tonal'>Tonal</Chip>
    </div>
  );
}

export function ChipThemes() {
  return (
    <div className='flex flex-wrap gap-2'>
      <Chip theme='primary' variant='filled'>
        Primary
      </Chip>
      <Chip theme='secondary' variant='filled'>
        Secondary
      </Chip>
      <Chip theme='success' variant='filled'>
        Success
      </Chip>
      <Chip theme='danger' variant='filled'>
        Danger
      </Chip>
      <Chip theme='warning' variant='filled'>
        Warning
      </Chip>
      <Chip theme='info' variant='filled'>
        Info
      </Chip>
      <Chip theme='neutral' variant='filled'>
        Neutral
      </Chip>
    </div>
  );
}

export function ChipSizes() {
  return (
    <div className='flex flex-wrap items-center gap-2'>
      <Chip size='sm'>Small</Chip>
      <Chip size='md'>Medium</Chip>
      <Chip size='lg'>Large</Chip>
    </div>
  );
}

export function ChipWithIcon() {
  return (
    <div className='flex flex-wrap gap-2'>
      <Chip icon={<Star />}>Favourite</Chip>
      <Chip icon={<Check />}>Approved</Chip>
      <Chip icon={<User />}>User</Chip>
    </div>
  );
}

export function ChipDismissible() {
  return (
    <div className='flex flex-wrap gap-2'>
      <Chip onDismiss={noop}>Dismissible</Chip>
      <Chip onDismiss={noop} icon={<Check />}>
        Approved
      </Chip>
    </div>
  );
}

export function ChipDisabled() {
  return (
    <div className='flex flex-wrap gap-2'>
      <Chip disabled>Disabled</Chip>
      <Chip disabled variant='filled'>
        Disabled Filled
      </Chip>
    </div>
  );
}

export function ChipSelectable() {
  const [selected, setSelected] = useState<string[]>([]);

  const toggle = (label: string) => {
    setSelected(prev => (prev.includes(label) ? prev.filter(l => l !== label) : [...prev, label]));
  };

  return (
    <div className='flex flex-wrap gap-2'>
      {['React', 'Vue', 'Angular', 'Svelte'].map(label => (
        <Chip key={label} selected={selected.includes(label)} onClick={toggle.bind(null, label)}>
          {label}
        </Chip>
      ))}
    </div>
  );
}

API Reference

Chip

Prop	Type	Default	Description
`variant`	`filled \| outlined \| tonal`	`outlined`	Visual style (neutral border by default, matching UX4G)
`size`	`sm \| md \| lg`	`md`	Chip size
`icon`	`ReactNode`	—	Leading icon
`avatar`	`ReactNode`	—	Avatar element
`onDismiss`	`() => void`	—	Dismiss callback, shows close button
`selected`	`boolean`	—	Selected state
`disabled`	`boolean`	—	Disabled state

Chip

On this page