Tailwind CSS Label & Feedback Groups Blocks

All Blocks
Application UI
UI Components
Label & Feedback Groups

Label & Feedback Groups

Label groups and feedback controls for linked rows, helpfulness prompts, and wrapped action chips.

Icon Link List Pro

Stacked list of linked rows with leading icons and trailing chevrons.

<div class="space-y-3">
                      <button type="button" class="flex items-center gap-x-1.5 text-start text-sm text-foreground hover:text-muted-foreground-2 focus:outline-hidden focus:text-muted-foreground-2" data-hs-overlay="#hs-pro-shnlm">
                        <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg>

Location
                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                      </button>

<button type="button" class="flex items-center gap-x-1.5 text-start text-sm text-foreground hover:text-muted-foreground-2 focus:outline-hidden focus:text-muted-foreground-2" data-hs-overlay="#hs-pro-shnrsm">
                        <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
                        United Kingdom
                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                      </button>

<button type="button" class="flex items-center gap-x-1.5 text-start text-sm text-foreground hover:text-muted-foreground-2 focus:outline-hidden focus:text-muted-foreground-2" data-hs-overlay="#hs-pro-shwrm">
                        <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                        Send us feedback
                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                      </button>
                    </div>

Open related storefront homepage

Helpfulness Feedback Button Group Pro

Centered feedback prompt pairs two response buttons with a small result count underneath.

<div class="text-center">
                      <p class="text-muted-foreground-2">
                        Was this article helpful?
                      </p>
                    </div>

<div class="mt-5 flex flex-wrap justify-center items-center gap-3">
                      <button type="button" class="py-2.5 px-3.5 w-32 inline-flex justify-center items-center gap-x-1.5 text-sm rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                        <svg class="shrink-0 size-4 text-teal-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                        Yes
                      </button>
                      <button type="button" class="py-2.5 px-3.5 w-32 inline-flex justify-center items-center gap-x-1.5 text-sm rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                        <svg class="shrink-0 size-4 text-red-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                        No
                      </button>
                    </div>

<div class="mt-5 text-center">
                      <p class="text-xs text-muted-foreground-1">
                        39 out of 57 found this helpful
                      </p>
                    </div>

Open related help topic page

File Action Label Buttons Pro

Wrap row of rounded action labels with icons for repeated file or content tasks.

<div class="flex flex-wrap justify-center gap-1 sm:gap-2">
                    <button type="button" class="py-2.5 px-3.5 inline-flex items-center gap-x-2 bg-surface border-[1.5px] border-transparent text-primary text-sm hover:border-primary rounded-full focus:outline-hidden focus:border-primary disabled:opacity-50 disabled:pointer-events-none">
                      <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
                      Upload or import content
                    </button>
                    <button type="button" class="py-2.5 px-3.5 inline-flex items-center gap-x-2 bg-surface border-[1.5px] border-transparent text-primary text-sm hover:border-primary rounded-full focus:outline-hidden focus:border-primary disabled:opacity-50 disabled:pointer-events-none">
                      <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h20"/><path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"/><path d="m7 21 5-5 5 5"/></svg>
                      Design a visual post
                    </button>
                    <button type="button" class="py-2.5 px-3.5 inline-flex items-center gap-x-2 bg-surface border-[1.5px] border-transparent text-primary text-sm hover:border-primary rounded-full focus:outline-hidden focus:border-primary disabled:opacity-50 disabled:pointer-events-none">
                      <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="7" x="3" y="3" rx="1"/><rect width="9" height="7" x="3" y="14" rx="1"/><rect width="5" height="7" x="16" y="14" rx="1"/></svg>
                      Create a template
                    </button>
                  </div>

Open related blank canvas page

Topic Label Link Group Free

Wrapped set of label-style links for lightweight topic or prompt navigation.

<div class="flex flex-wrap justify-center gap-1.5 sm:gap-2">
                  <a class="py-1.5 px-2.5 inline-flex items-center gap-x-1.5 text-sm text-foreground bg-surface hover:text-primary-hover rounded-lg focus:outline-hidden focus:text-primary-focus" href="#">
                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>
                    Health
                  </a>
                  <a class="py-1.5 px-2.5 inline-flex items-center gap-x-1.5 text-sm text-foreground bg-surface hover:text-primary-hover rounded-lg focus:outline-hidden focus:text-primary-focus" href="#">
                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z"/><path d="M22 10v6"/><path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5"/></svg>
                    Learn
                  </a>
                  <a class="py-1.5 px-2.5 inline-flex items-center gap-x-1.5 text-sm text-foreground bg-surface hover:text-primary-hover rounded-lg focus:outline-hidden focus:text-primary-focus" href="#">
                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20v2"/><path d="M12 2v2"/><path d="M17 20v2"/><path d="M17 2v2"/><path d="M2 12h2"/><path d="M2 17h2"/><path d="M2 7h2"/><path d="M20 12h2"/><path d="M20 17h2"/><path d="M20 7h2"/><path d="M7 20v2"/><path d="M7 2v2"/><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="8" y="8" width="8" height="8" rx="1"/></svg>
                    Technology
                  </a>
                  <a class="py-1.5 px-2.5 inline-flex items-center gap-x-1.5 text-sm text-foreground bg-surface hover:text-primary-hover rounded-lg focus:outline-hidden focus:text-primary-focus" href="#">
                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2v2"/><path d="M14 2v2"/><path d="M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1"/><path d="M6 2v2"/></svg>
                    Life stuff
                  </a>
                  <a class="py-1.5 px-2.5 inline-flex items-center gap-x-1.5 text-sm text-foreground bg-surface hover:text-primary-hover rounded-lg focus:outline-hidden focus:text-primary-focus" href="#">
                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 18h8"/><path d="M3 22h18"/><path d="M14 22a7 7 0 1 0 0-14h-1"/><path d="M9 14h2"/><path d="M9 12a2 2 0 0 1-2-2V6h6v4a2 2 0 0 1-2 2Z"/><path d="M12 6V3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3"/></svg>
                    Science
                  </a>
                  <a class="py-1.5 px-2.5 inline-flex items-center gap-x-1.5 text-sm text-foreground bg-surface hover:text-primary-hover rounded-lg focus:outline-hidden focus:text-primary-focus" href="#">
                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>
                    Language
                  </a>
                </div>

Open related AI chat page