Chips

Chips Types

Chips can show multiple interactive elements together in the same area, such as a list of selectable movie times, or a series of email contacts. There are four types of chips: assist, filter, input, and suggestion. You have to add .active classes to change background active.

              
<!-- chips assist -->
<div class="inline-flex flex-row items-center gap-2 h-8 py-1.5 px-3 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 [&.active]:border-secondary-100 dark:[&.active]:border-secondary-700 hover:bg-surface-200 dark:hover:bg-surfacedark-200 focus:bg-surface-400 dark:focus:bg-surfacedark-400 border border-gray-500 dark:border-gray-200 rounded-lg text-sm tracking-[.00714em]">
  Enabled
</div>

<!-- chips input -->
<div class="inline-flex flex-row items-center gap-2 h-8 py-1.5 px-3 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 [&.active]:border-secondary-100 dark:[&.active]:border-secondary-700 hover:bg-surface-200 dark:hover:bg-surfacedark-200 focus:bg-surface-400 dark:focus:bg-surfacedark-400 border border-gray-500 dark:border-gray-200 rounded-lg text-sm tracking-[.00714em]">
  Enabled
  <span class="material-symbols-outlined cursor-pointer !text-base">close</span>
</div>

<!-- chips avatar -->
<div class="inline-flex flex-row items-center gap-2 h-8 py-1 pl-1 pr-3 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 [&.active]:border-secondary-100 dark:[&.active]:border-secondary-700 hover:bg-surface-200 dark:hover:bg-surfacedark-200 focus:bg-surface-400 dark:focus:bg-surfacedark-400 border border-gray-500 dark:border-gray-200 rounded-[30px] text-sm tracking-[.00714em]">
  <div class="w-6 h-6 rounded-full bg-gray-700 overflow-hidden">
    <img alt="Avatar" src="../src/img/avatar.png" class="w-6 h-6">
  </div>
  <span class="">Avatar</span>
</div>

<!-- chips icon -->
<div class="inline-flex flex-row items-center gap-2 h-8 py-1 pl-1 pr-3 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 [&.active]:border-secondary-100 dark:[&.active]:border-secondary-700 hover:bg-surface-200 dark:hover:bg-surfacedark-200 focus:bg-surface-400 dark:focus:bg-surfacedark-400 border border-gray-500 dark:border-gray-200 rounded-[30px] text-sm tracking-[.00714em]">
  <div class="flex items-center justify-center w-6 h-6 overflow-hidden rounded-full bg-gray-700">
    <span class="material-symbols-outlined !text-white">face</span>
  </div>
  <span>With Icon</span>
</div>

<!-- chips icon close -->
<div class="inline-flex flex-row items-center gap-2 h-8 py-1 pl-1 pr-3 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 [&.active]:border-secondary-100 dark:[&.active]:border-secondary-700 hover:bg-surface-200 dark:hover:bg-surfacedark-200 focus:bg-surface-400 dark:focus:bg-surfacedark-400 border border-gray-500 dark:border-gray-200 rounded-[30px] text-sm tracking-[.00714em]">
  <div class="flex items-center justify-center w-6 h-6 overflow-hidden rounded-full bg-gray-700">
    <span class="material-symbols-outlined !text-white">face</span>
  </div>
  <span>With Icon</span>
  <span class="material-symbols-outlined cursor-pointer !text-base">close</span>
</div>

<!-- chips active -->
<div class="active [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 [&.active]:border-secondary-100 dark:[&.active]:border-secondary-700 inline-flex flex-row items-center hover:bg-surface-200 dark:hover:bg-surfacedark-200 focus:bg-surface-400 dark:focus:bg-surfacedark-400 border border-gray-500 dark:border-gray-200 gap-2 h-8 py-1.5 px-3 rounded-lg text-sm tracking-[.00714em]">
  Chips active
</div>