buttontoolbaricontailwindroundedactionslucide

Rounded Icon Action Button Toolbar

Панель с 4 круглыми кнопками-иконками (ссылка, перемешать, обновить, отменить) на Tailwind CSS. Компактные кнопки действий для заголовков, карточек.

Live Preview

Prompt

<div class="flex gap-2 items-center">
  <button class="size-9 rounded-full border border-neutral-200 bg-white shadow-sm flex items-center justify-center hover:border-neutral-300" aria-label="Link Channels">
                <svg 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" data-lucide="link-2" class="lucide lucide-link-2 size-4 text-orange-500"><path d="M9 17H7A5 5 0 0 1 7 7h2"></path><path d="M15 7h2a5 5 0 1 1 0 10h-2"></path><line x1="8" x2="16" y1="12" y2="12"></line></svg>
              </button>
  <button class="size-9 rounded-full border border-neutral-200 bg-white shadow-sm flex items-center justify-center hover:border-neutral-300" aria-label="Randomize">
                <svg 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" data-lucide="shuffle" class="lucide lucide-shuffle size-4 text-neutral-700"><path d="m18 14 4 4-4 4"></path><path d="m18 2 4 4-4 4"></path><path d="M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22" class=""></path><path d="M2 6h1.972a4 4 0 0 1 3.6 2.2"></path><path d="M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45"></path></svg>
              </button>
  <button class="size-9 rounded-full border border-neutral-200 bg-white shadow-sm flex items-center justify-center hover:border-neutral-300" aria-label="Reverse">
                <svg 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" data-lucide="refresh-ccw" class="lucide lucide-refresh-ccw size-4 text-neutral-700"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path><path d="M16 16h5v5"></path></svg>
              </button>
  <button class="size-9 rounded-full border border-neutral-200 bg-white shadow-sm flex items-center justify-center hover:border-neutral-300" aria-label="Reset">
                <svg 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" data-lucide="undo-2" class="lucide lucide-undo-2 size-4 text-neutral-700"><path d="M9 14 4 9l5-5"></path><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"></path></svg>
              </button>
</div>

All Prompts