Chip

A chip component for displaying tags, labels, and categories.

Overview

Chips are small, compact elements used to represent tags, categories, status, etc.

Basic Example

Label

basic.html

<!-- Default theme (클래스 생략 가능) -->
<div class="chip">
  <i class="icon icon-ellipse"></i>
  Label
</div>

<!-- 다른 컬러 테마 -->
<div class="chip blue">
  <i class="icon icon-ellipse"></i>
  Label
</div>

Types

Chip provides three types: default (dark background), fill (light background), border (border only).

Default Type (Dark background)

Label

Fill Type (Light background)

Label

Border Type (Border only)

Label

type.html

<!-- Default type (진한 배경 - 클래스 생략) -->
<div class="chip blue">
  <i class="icon icon-ellipse"></i>
  Label
</div>

<!-- Fill type (옅은 배경) -->
<div class="chip fill blue">
  <i class="icon icon-ellipse"></i>
  Label
</div>

<!-- Border type (테두리만) -->
<div class="chip border blue">
  <i class="icon icon-ellipse"></i>
  Label
</div>

Sizes

Chip supports sm (small) and md (default) sizes.

Size Comparison

Small size

Default size

size.html

<div class="chip sm blue">
  <i class="icon icon-ellipse"></i>
  Small size
</div>

<div class="chip blue">
  <i class="icon icon-ellipse"></i>
  Default size
</div>

Icons

You can add icons to chips to provide visual information.

Without icon

Label

Default icon (ellipse)

Label

Custom icons

User

Success

Warning

Error

icon.html

<!-- 아이콘 없이 -->
<div class="chip blue">Label</div>

<!-- ellipse 아이콘 -->
<div class="chip blue">
  <i class="icon icon-ellipse"></i>
  Label
</div>

<!-- 커스텀 아이콘 -->
<div class="chip blue">
  <i class="icon icon-user"></i>
  User
</div>

Rounded Corners

You can add the round class to create fully rounded corners.

Default (Slightly angular)

Label

Round (Fully rounded)

Label

round.html

<!-- 기본 (약간 각진 모서리) -->
<div class="chip blue">
  <i class="icon icon-ellipse"></i>
  Label
</div>

<!-- Round (완전히 둥근 모서리) -->
<div class="chip round blue">
  <i class="icon icon-ellipse"></i>
  Label
</div>

Delete Button

You can add a delete button to chips to provide removal functionality.

With delete button

Label

delete.html

<div class="chip blue">
  <i class="icon icon-ellipse"></i>
  Label
  <button aria-label="Delete"></button>
</div>

<script>
  // JavaScript로 삭제 기능 구현
  document.querySelectorAll('.chip button').forEach(button => {
    button.addEventListener('click', (e) => {
      e.target.closest('.chip').remove();
    });
  });
</script>

React Component

You can use the Chip component in React.

Basic Usage

Label

basic.tsx

import { Chip } from 'podo-ui';

function App() {
  return (
    <>
      <Chip theme="blue" icon="icon-ellipse">
        Label
      </Chip>
      <Chip theme="green" icon="icon-ellipse">
        Label
      </Chip>
      <Chip theme="orange" icon="icon-ellipse">
        Label
      </Chip>
    </>
  );
}

With delete functionality

React

TypeScript

Next.js

with-delete.tsx

import { useState } from 'react';
import { Chip } from 'podo-ui';

function TagList() {
  const [tags, setTags] = useState([
    { id: 1, label: 'React' },
    { id: 2, label: 'TypeScript' },
    { id: 3, label: 'Next.js' },
  ]);

  const handleDelete = (id: number) => {
    setTags(tags.filter((tag) => tag.id !== id));
  };

  return (
    <>
      {tags.map((tag) => (
        <Chip
          key={tag.id}
          theme="blue"
          round
          icon="icon-ellipse"
          onDelete={() => handleDelete(tag.id)}
        >
          {tag.label}
        </Chip>
      ))}
    </>
  );
}

Various Variants

Small size

Fill type

Border + Round

Deletable

variants.tsx

<Chip size="sm" theme="blue" icon="icon-user">
  Small size
</Chip>

<Chip theme="green" type="fill" icon="icon-check">
  Fill type
</Chip>

<Chip theme="orange" type="border" round>
  Border + Round
</Chip>

<Chip theme="red" icon="icon-warning" onDelete={() => alert('Delete')}>
  Deletable
</Chip>

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Content to display in the chip
`theme`	`'default' \| 'blue' \| 'green' \| 'orange' \| 'yellow' \| 'red'`	`'default'`	Color theme of the chip
`type`	`'default' \| 'fill' \| 'border'`	`'default'`	Style type of the chip (default, fill, border)
`size`	`'sm' \| 'md'`	`'md'`	Size of the chip
`round`	`boolean`	`false`	Whether to apply fully rounded corners
`icon`	`string`	-	Icon class name to display in the chip
`onDelete`	`() => void`	-	Function called when delete button is clicked
`className`	`string`	`''`	Additional CSS class

Podo UI

Chip

Overview

Types

Sizes

Icons

Rounded Corners

Delete Button

React Component

Props