Chip

UI Components

A compact element representing an input, attribute, or action, often with optional dismiss functionality. Used for tags, filters, or multi-select displays.

Visual Examples

Example 1

Example 2

Example 3

Visual examples for Chip coming soon.

How It Works in Apps/Websites

Chips are small, pill-shaped elements that display discrete information or choices. They can be static (display only), dismissible (with X button), or selectable (toggle on/off). Commonly used to show selected filters, tags, or user inputs. Can contain text, icons, or avatars.

How AI Interprets This Term

When you say 'chip', AI expects: a small pill-shaped element (height ~32px), with text and optional icon or avatar on left, optional X dismiss button on right. Rounded full (pill shape), subtle background color. May have selected/unselected states.

Prompt Examples

Copy-paste these prompts to use in your AI tools.

Basic

Create chips showing selected filters with dismiss buttons

Detailed

Design a filter chip set: pill-shaped, 32px height, selected chips have blue background (#3b82f6) and white text, unselected have gray border. Include checkmark icon when selected. Chips for: 'Electronics', 'Under $50', 'Free Shipping'.

Comparative

Show input chips (dismissible, showing user selections) vs filter chips (toggleable on/off)

Compare With

Related or contrasting terms to help you understand the differences.

tagbadgebutton

Variants & States

Variants

input chip (with dismiss)filter chip (toggleable)action chipassist chip

States

defaultselecteddisabledhover

Usage Guidelines

When to Use

  • •Displaying selected items
  • •Filter selections
  • •Tags and categories
  • •Multi-select inputs

When NOT to Use

  • •Single status indicators (use badge)
  • •Navigation (use links)
  • •Primary actions (use button)

Related Terms

Badge

A small visual indicator used to display status, counts, or labels. Often appears as a small circle or rounded rectangle attached to other elements.

tagfilter
Back to category