Skip to main content
Last updated on
Version: 1.0.0

Chip

Overview​

Chip can be displayed individually or as a group based on user required.

There are supports three types:

  • Text only (default)

  • Avatar

  • Icon

The chip supports two states:

  • Chip without a clear icon

  • Chip with a clear icon

Text Only (Default)​

The default chip contains a text label only.

Chip without a clear icon​

<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
  <li>Easy <strong>markdown</strong> editing</li>
  <li><strong>HTML</strong> export functionality</li>
</ul>

Chip with a clear icon​

<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
  <li>Easy <strong>markdown</strong> editing</li>
  <li><strong>HTML</strong> export functionality</li>
</ul>

Avatar​

The avatar chip includes an avatar followed by a text label.

Chip without a clear icon​

<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
  <li>Easy <strong>markdown</strong> editing</li>
  <li><strong>HTML</strong> export functionality</li>
</ul>

Chip with a clear icon​

<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
  <li>Easy <strong>markdown</strong> editing</li>
  <li><strong>HTML</strong> export functionality</li>
</ul>

Icon​

The icon chip contains an icon and a text label.

Chip without a clear icon​

<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
  <li>Easy <strong>markdown</strong> editing</li>
  <li><strong>HTML</strong> export functionality</li>
</ul>

Chip with a clear icon​

<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
  <li>Easy <strong>markdown</strong> editing</li>
  <li><strong>HTML</strong> export functionality</li>
</ul>

Chip Group​

Depending on the requirements, chips can be displayed in two ways:

  • Limited display: When the number of chips exceeds the defined limit, the remaining chips are represented by a “+N” indicator. Hovering over the “+N” indicator reveals the hidden chips in a tooltip. This behavior applies only to chips without remove action.

  • Unlimited display: All chips are shown with no limit on the number displayed.

<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
  <li>Easy <strong>markdown</strong> editing</li>
  <li><strong>HTML</strong> export functionality</li>
</ul>

User Experience​

✨ Chips should be compact, scannable, and visually consistent.

✨ Keep chip labels short to avoid truncation or overflow.

✨ The clear (×) icon is the only control used to remove a chip.

✨ Chips without a clear icon must be treated as non-removable.

✨ Icons and avatars should add clear meaning, not decoration.

✨ Avoid using chips for long or complex content.

Figma​

All details and specifications in the design can be referenced through the Figma link below.

Chip UI Design

Last updated on