Chip Notifications

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

With 20 new components!Check what's new

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 -->

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 -->

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

Fully rounded chip notifications with leading button

Fully rounded chip notifications with trailing button

Usage

Specs

Accessibility notes

Check out the latest release!