Chip Notifications

Compact elements that allow to highlight meaningful information, or direct users to important content.

30k+ satisfied users

Variations

Chip notifications with leading button

Copy as:HTMLReact

Version 3.40, with 20 new components! Version 3.40

copydone

Version 3.40, with 20 new components! Version 3.40

copydone

With 20 new components!Check what's new

copydone

With 20 new components!Check what's new

copydone

<!-- Component: Chip notification with leading button -->
<div class="inline-flex items-center gap-4 rounded border border-slate-200 bg-white/50 p-0.5 pr-4">
  <button class="inline-flex items-center justify-center h-8 gap-2 px-4 text-xs font-medium tracking-wide text-white transition duration-300 rounded whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
    <span>See whats new</span>
  </button>
  <div class="flex items-center gap-1 text-slate-500">
    <!-- Text displayed in big screens -->
    <span class="hidden md:block">
      Version 3.40, with 20 new components!
    </span>
    <!-- Text displayed in big screens -->
    <span class="block md:hidden">Version 3.40</span>
  </div>
</div>
<!-- End Chip notification with leading button -->

Chip notifications with trailing button

Copy as:HTMLReact

Version 3.40, with 20 new components! Version 3.40

copydone

Version 3.40, with 20 new components! Version 3.40

copydone

Check what's newwith 20 new components!

copydone

Check what's newwith 20 new components!

copydone

<!-- Component: Chip notification with trailing button -->
<div class="inline-flex items-center gap-4 rounded border border-slate-200 bg-white/50 p-0.5 pl-4">
  <div class="flex items-center gap-1 text-slate-500">
    <!-- Text displayed in big screens -->
    <span class="hidden md:block">
      Version 3.40, with 20 new components!
    </span>
    <!-- Text displayed in big screens -->
    <span class="block md:hidden">Version 3.40</span>
  </div>
  <button class="inline-flex items-center justify-center h-8 gap-2 px-4 text-xs font-medium tracking-wide text-white transition duration-300 rounded whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
    <span>See whats new</span>
  </button>
</div>
<!-- End Chip notification with trailing button -->

Chip notifications with leading icon

Copy as:HTMLReact

#1 product of the year inProduct Hunt

copydone

#1 product of the year inProduct Hunt

copydone

#1 product of the year inProduct Hunt

copydone

<!-- Component: Chip notification with leading icon -->
<div class="inline-flex items-center gap-4 rounded border border-slate-200 bg-white/50 p-0.5 pr-4 ">
  <span class="inline-flex items-center justify-center w-10 h-10 text-white transition duration-100 rounded bg-emerald-500">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
      <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 18.75h-9m9 0a3 3 0 0 1 3 3h-15a3 3 0 0 1 3-3m9 0v-3.375c0-.621-.503-1.125-1.125-1.125h-.871M7.5 18.75v-3.375c0-.621.504-1.125 1.125-1.125h.872m5.007 0H9.497m5.007 0a7.454 7.454 0 0 1-.982-3.172M9.497 14.25a7.454 7.454 0 0 0 .981-3.172M5.25 4.236c-.982.143-1.954.317-2.916.52A6.003 6.003 0 0 0 7.73 9.728M5.25 4.236V4.5c0 2.108.966 3.99 2.48 5.228M5.25 4.236V2.721C7.456 2.41 9.71 2.25 12 2.25c2.291 0 4.545.16 6.75.47v1.516M7.73 9.728a6.726 6.726 0 0 0 2.748 1.35m8.272-6.842V4.5c0 2.108-.966 3.99-2.48 5.228m2.48-5.492a46.32 46.32 0 0 1 2.916.52 6.003 6.003 0 0 1-5.395 4.972m0 0a6.726 6.726 0 0 1-2.749 1.35m0 0a6.772 6.772 0 0 1-3.044 0" />
    </svg>
  </span>
  <div class="flex items-center gap-1 text-slate-500 ">
    <span class="flex gap-1"> #1 <span class="hidden md:block"> product of the year </span> in</span>
    <a href="javascript:void(0)" class="inline-flex items-center justify-center gap-2 tracking-wide transition duration-300 justify-self-center whitespace-nowrap text-emerald-500 hover:text-emerald-600 focus:text-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:text-emerald-300 disabled:shadow-none">
      <span>Product Hunt</span>
    </a>
  </div>
</div>
<!-- End Chip notification with leading icon -->

Chip notifications with trailing icon

Copy as:HTMLReact

#1 product of the year inProduct Hunt

copydone

#1 product of the year inProduct Hunt

copydone

#1 product of the year inProduct Hunt

copydone

<!-- Component: Chip notification with trailing icon -->
<div class="inline-flex items-center gap-4 rounded border border-slate-200 bg-white/50 p-0.5 pl-4 ">
  <div class="flex items-center gap-1 text-slate-500 ">
    <span class="flex gap-1"> #1 <span class="hidden md:block"> product of the year </span> in</span>
    <a href="javascript:void(0)" class="inline-flex items-center justify-center gap-2 tracking-wide transition duration-300 justify-self-center whitespace-nowrap text-emerald-500 hover:text-emerald-600 focus:text-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:text-emerald-300 disabled:shadow-none">
      <span>Product Hunt</span>
    </a>
  </div>
  <span class="inline-flex items-center justify-center w-10 h-10 text-white transition duration-100 rounded bg-emerald-500">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
      <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 18.75h-9m9 0a3 3 0 0 1 3 3h-15a3 3 0 0 1 3-3m9 0v-3.375c0-.621-.503-1.125-1.125-1.125h-.871M7.5 18.75v-3.375c0-.621.504-1.125 1.125-1.125h.872m5.007 0H9.497m5.007 0a7.454 7.454 0 0 1-.982-3.172M9.497 14.25a7.454 7.454 0 0 0 .981-3.172M5.25 4.236c-.982.143-1.954.317-2.916.52A6.003 6.003 0 0 0 7.73 9.728M5.25 4.236V4.5c0 2.108.966 3.99 2.48 5.228M5.25 4.236V2.721C7.456 2.41 9.71 2.25 12 2.25c2.291 0 4.545.16 6.75.47v1.516M7.73 9.728a6.726 6.726 0 0 0 2.748 1.35m8.272-6.842V4.5c0 2.108-.966 3.99-2.48 5.228m2.48-5.492a46.32 46.32 0 0 1 2.916.52 6.003 6.003 0 0 1-5.395 4.972m0 0a6.726 6.726 0 0 1-2.749 1.35m0 0a6.772 6.772 0 0 1-3.044 0" />
    </svg>
  </span>
</div>
<!-- End Chip notification with trailing icon -->

Fully rounded chip notifications with leading button

Copy as:HTMLReact

Version 3.40, with 20 new components! Version 3.40

copydone

Version 3.40, with 20 new components! Version 3.40

copydone

With 20 new components!Check what's new

copydone

With 20 new components!Check what's new

copydone

<!-- Component: Chip notification with leading button -->
<div class="inline-flex items-center gap-4 rounded-full border border-slate-200 bg-white/50 p-0.5 pr-4">
  <button class="inline-flex items-center justify-center h-8 gap-2 px-4 text-xs font-medium tracking-wide text-white transition duration-300 rounded-full whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
    <span>See whats new</span>
  </button>
  <div class="flex items-center gap-1 text-slate-500">
    <!-- Text displayed in big screens -->
    <span class="hidden md:block">
      Version 3.40, with 20 new components!
    </span>
    <!-- Text displayed in big screens -->
    <span class="block md:hidden">Version 3.40</span>
  </div>
</div>
<!-- End Chip notification with leading button -->

Fully rounded chip notifications with trailing button

Copy as:HTMLReact

Version 3.40, with 20 new components! Version 3.40

copydone

Version 3.40, with 20 new components! Version 3.40

copydone

Check what's newwith 20 new components!

copydone

Check what's newwith 20 new components!

copydone

<!-- Component: Chip notification with trailing button -->
<div class="inline-flex items-center gap-4 rounded-full border border-slate-200 bg-white/50 p-0.5 pl-4">
  <div class="flex items-center gap-1 text-slate-500">
    <!-- Text displayed in big screens -->
    <span class="hidden md:block">
      Version 3.40, with 20 new components!
    </span>
    <!-- Text displayed in big screens -->
    <span class="block md:hidden">Version 3.40</span>
  </div>
  <button class="inline-flex items-center justify-center h-8 gap-2 px-4 text-xs font-medium tracking-wide text-white transition duration-300 rounded-full whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
    <span>See whats new</span>
  </button>
</div>
<!-- End Chip notification with trailing button -->

Fully rounded chip notifications with grouped avatars

Copy as:HTMLReact

30k+ satisfied users

copydone

30k+ satisfied users

copydone

<!-- Component: Fully rounded chip notification with grouped avatars -->
<div class="inline-flex items-center gap-4 rounded-full border border-slate-200 bg-white/50 p-0.5 pr-4 ">
  <span class="flex">
    <a href="#" class="relative inline-flex items-center justify-center w-10 h-10 -mx-2 text-white rounded-full first:ml-0">
      <img src="https://i.pravatar.cc/40?img=8" alt="user name" title="user name" width="40" height="40" class="max-w-full rounded-full" />
    </a>
    <a href="#" class="relative inline-flex items-center justify-center w-10 h-10 -mx-2 text-white rounded-full first:ml-0">
      <img src="https://i.pravatar.cc/40?img=10" alt="user name" title="user name" width="40" height="40" class="max-w-full rounded-full" />
    </a>
    <a href="#" class="relative inline-flex items-center justify-center w-10 h-10 -mx-2 text-white rounded-full first:ml-0">
      <img src="https://i.pravatar.cc/40?img=11" alt="user name" title="user name" width="40" height="40" class="max-w-full rounded-full" />
    </a>
  </span>
  <div class="flex items-center gap-1 text-slate-500 ">
    <!-- Text displayed in big screens -->
    <span class="font-semibold"> 30k+ </span>
    <!-- Text displayed in big screens -->
    <span>satisfied users</span>
  </div>
</div>
<!-- End Fully rounded chip notification with grouped avatars -->

Fully rounded chip notifications with leading icon

Copy as:HTMLReact

#1 product of the year inProduct Hunt

copydone

#1 product of the year inProduct Hunt

copydone

#1 product of the year inProduct Hunt

copydone

<!-- Component: Rounded full chip notification with leading icon -->
<div class="inline-flex items-center gap-4 rounded-full border border-slate-200 bg-white/50 p-0.5 pr-4 ">
  <span class="inline-flex items-center justify-center w-10 h-10 text-white transition duration-100 rounded-full bg-emerald-500">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
      <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 18.75h-9m9 0a3 3 0 0 1 3 3h-15a3 3 0 0 1 3-3m9 0v-3.375c0-.621-.503-1.125-1.125-1.125h-.871M7.5 18.75v-3.375c0-.621.504-1.125 1.125-1.125h.872m5.007 0H9.497m5.007 0a7.454 7.454 0 0 1-.982-3.172M9.497 14.25a7.454 7.454 0 0 0 .981-3.172M5.25 4.236c-.982.143-1.954.317-2.916.52A6.003 6.003 0 0 0 7.73 9.728M5.25 4.236V4.5c0 2.108.966 3.99 2.48 5.228M5.25 4.236V2.721C7.456 2.41 9.71 2.25 12 2.25c2.291 0 4.545.16 6.75.47v1.516M7.73 9.728a6.726 6.726 0 0 0 2.748 1.35m8.272-6.842V4.5c0 2.108-.966 3.99-2.48 5.228m2.48-5.492a46.32 46.32 0 0 1 2.916.52 6.003 6.003 0 0 1-5.395 4.972m0 0a6.726 6.726 0 0 1-2.749 1.35m0 0a6.772 6.772 0 0 1-3.044 0" />
    </svg>
  </span>
  <div class="flex items-center gap-1 text-slate-500 ">
    <span class="flex gap-1"> #1 <span class="hidden md:block"> product of the year </span> in</span>
    <a href="javascript:void(0)" class="inline-flex items-center justify-center gap-2 tracking-wide transition duration-300 justify-self-center whitespace-nowrap text-emerald-500 hover:text-emerald-600 focus:text-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:text-emerald-300 disabled:shadow-none">
      <span>Product Hunt</span>
    </a>
  </div>
</div>
<!-- End Rounded full chip notification with leading icon -->

Fully rounded chip notifications with trailing icon

Copy as:HTMLReact

#1 product of the year inProduct Hunt

copydone

#1 product of the year inProduct Hunt

copydone

#1 product of the year inProduct Hunt

copydone

<!-- Component: Rounded full chip notification with trailing icon -->
<div class="inline-flex items-center gap-4 rounded-full border border-slate-200 bg-white/50 p-0.5 pl-4 ">
  <div class="flex items-center gap-1 text-slate-500 ">
    <span class="flex gap-1"> #1 <span class="hidden md:block"> product of the year </span> in</span>
    <a href="javascript:void(0)" class="inline-flex items-center justify-center gap-2 tracking-wide transition duration-300 justify-self-center whitespace-nowrap text-emerald-500 hover:text-emerald-600 focus:text-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:text-emerald-300 disabled:shadow-none">
      <span>Product Hunt</span>
    </a>
  </div>
  <span class="inline-flex items-center justify-center w-10 h-10 text-white transition duration-100 rounded-full bg-emerald-500">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
      <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 18.75h-9m9 0a3 3 0 0 1 3 3h-15a3 3 0 0 1 3-3m9 0v-3.375c0-.621-.503-1.125-1.125-1.125h-.871M7.5 18.75v-3.375c0-.621.504-1.125 1.125-1.125h.872m5.007 0H9.497m5.007 0a7.454 7.454 0 0 1-.982-3.172M9.497 14.25a7.454 7.454 0 0 0 .981-3.172M5.25 4.236c-.982.143-1.954.317-2.916.52A6.003 6.003 0 0 0 7.73 9.728M5.25 4.236V4.5c0 2.108.966 3.99 2.48 5.228M5.25 4.236V2.721C7.456 2.41 9.71 2.25 12 2.25c2.291 0 4.545.16 6.75.47v1.516M7.73 9.728a6.726 6.726 0 0 0 2.748 1.35m8.272-6.842V4.5c0 2.108-.966 3.99-2.48 5.228m2.48-5.492a46.32 46.32 0 0 1 2.916.52 6.003 6.003 0 0 1-5.395 4.972m0 0a6.726 6.726 0 0 1-2.749 1.35m0 0a6.772 6.772 0 0 1-3.044 0" />
    </svg>
  </span>
</div>
<!-- End Rounded full chip notification with trailing icon -->

Usage

Highlight meaningful information, or direct users to important content.

Specs

Chip notification component have an internal padding of 0.125rem (2px) and 1rem (16px) on the left or right, opposite of the included button. They can include the following elements:

Text: 1rem (16px) font size.
Action buttons: a small size button (see buttons ).

Accessibility notes

The Chip notification does not require any additional accessibility settings. For the included <button> check buttons.

Chip Notifications

Variations

Chip notifications with leading button

Chip notifications with trailing button

Chip notifications with leading icon

Chip notifications with trailing icon

Fully rounded chip notifications with leading button

Fully rounded chip notifications with trailing button

Fully rounded chip notifications with grouped avatars

Fully rounded chip notifications with leading icon

Fully rounded chip notifications with trailing icon

Usage

Specs

Accessibility notes

Check out the latest release!