Home
Timox5ty7thymix
Button group with icon

Button group with icon

edit, view, and delete buttons group

This tailwind example is contributed by Timox5ty7thymix, on 15-Jan-2023. Component is made with Tailwind CSS v3. It is responsive.

Button Group

Author Timox5ty7thymix

17.7k

Fork Fullscreen

<div class="inline-flex items-center rounded-md shadow-sm">
    <button
        class="text-slate-800 hover:text-blue-600 text-sm bg-white hover:bg-slate-100 border border-slate-200 rounded-l-lg font-medium px-4 py-2 inline-flex space-x-1 items-center">
        <span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
            </svg>
        </span>
        <span class="hidden md:inline-block">Edit</span>
    </button>
    <button
        class="text-slate-800 hover:text-blue-600 text-sm bg-white hover:bg-slate-100 border-y border-slate-200 font-medium px-4 py-2 inline-flex space-x-1 items-center">
        <span>
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
        </span>
        <span class="hidden md:inline-block">View</span>
    </button>
    <button
        class="text-slate-800 hover:text-blue-600 text-sm bg-white hover:bg-slate-100 border border-slate-200 rounded-r-lg font-medium px-4 py-2 inline-flex space-x-1 items-center">
        <span>
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
            </svg>
        </span>
        <span class="hidden md:inline-block">Delete</span>
    </button>
</div>

Related Examples

Tab navigation buttons

Author:
Simon Scheffer

3 years ago

17.7k
Radio Button Group for Search Filters
set of radio buttons grouped for selecting different search filters

Author:
Prajwal Hallale

2 years ago

5.6k
Thumbs up and thumbs down buttons
Upvote downvote buttons

Author:
Prajwal Hallale

2 years ago

11.9k
Boutons iOS 26
Boutons iOS 26

Author:
Omer fils ELENGA

3 months ago

586
Acode Master
Acode Master is a skilled and passionate software developer known for mastering coding and creating innovative tech solutions. Specializing in modern web technologies like React.js, Node.js, PHP, and databases such as MySQL and PostgreSQL, Acode Master builds practical, efficient, and scalable applications. Beyond coding, Acode Master is dedicated to continuous learning, sharing knowledge, and empowering others through technology-driven projects and education.

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

1.4k
Button Group

Author:
Prem..

3 years ago

10k
Buttons with Icon

Author:
_Amar_

3 years ago

16.1k
Disabled Button & Active Button

Author:
Dipti narayan

2 years ago

37.8k
Button Dropdown
Drop down button with only tailwind css using focus

Author:
Shivam Vishwakarma

1 year ago

2.1k
Button group

Author:
Conan Hilton

3 years ago

9.2k
Old style Button Designs

Author:
Amit Pachange

3 years ago

10.1k
Sign in with buttons

Author:
Simon Scheffer

3 years ago

11.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components