CODEWITHSUNDEEP
htmltailwind-css
mstdmstd
mstdmstd

Reputation: 3115

How to make button with icon at left side without line break?

With tailwindcss I make button with icon at left side, but I got that icon and buttons are on different lines and to fix it I wrapped these 2 elements with flex items-start justify-between classes :

<div class="flex">
    <button type="submit" class="bg-gray-500 text-white hover:bg-purple-500 p-2 rounded text-sm w-auto">
        <div class="flex items-start justify-between" >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M6.707 4.879A3 3 0 018.828 4H15a3 3 0 013 3v6a3 3 0 01-3 3H8.828a3 3 0 01-2.12-.879l-4.415-4.414a1 1 0 010-1.414l4.414-4.414zm4 2.414a1 1 0 00-1.414 1.414L10.586 10l-1.293 1.293a1 1 0 101.414 1.414L12 11.414l1.293 1.293a1 1 0 001.414-1.414L13.414 10l1.293-1.293a1 1 0 00-1.414-1.414L12 8.586l-1.293-1.293z" clip-rule="evenodd" />
        </svg>
        Cancel
        </div>
    </button>

But in result icon is hidden at all and I see only Cancel button. How to fix it ?

MODIFIED BLOCK: My PhpStorm show hint that div is not allowed inside of <button> tag, so I tried to wrap with span, like

<button type="submit" class="bg-gray-500 text-white hover:bg-purple-500 p-2 rounded text-sm w-auto">        
    <span class=" flex items-start justify-start">
        <span class="">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd"
                      d="M6.707 4.879A3 3 0 018.828 4H15a3 3 0 013 3v6a3 3 0 01-3 3H8.828a3 3 0 01-2.12-.879l-4.415-4.414a1 1 0 010-1.414l4.414-4.414zm4 2.414a1 1 0 00-1.414 1.414L10.586 10l-1.293 1.293a1 1 0 101.414 1.414L12 11.414l1.293 1.293a1 1 0 001.414-1.414L13.414 10l1.293-1.293a1 1 0 00-1.414-1.414L12 8.586l-1.293-1.293z"
                      clip-rule="evenodd"/>
            </svg>
        </span>
        <span>
            Cancel
        </span>
    </span>        
</button>

But icon is not visible anyway.

Upvotes: 3

Views: 6706

Answers (2)

Emtiaz Zahid
Emtiaz Zahid

Reputation: 2855

Here an another sample:

source: https://tailwindcomponents.com/component/button-with-icon

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<button class="bg-grey-light hover:bg-grey text-grey-darkest font-bold py-2 px-4 rounded inline-flex items-center">
  <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
  <span>Download</span>
</button>

enter image description here

Upvotes: 2

juliomalves
juliomalves

Reputation: 50338

You'll want to set a width to the SVG icon. You could also move the flex classes to the <button> itself to reduce the number of elements.

Here's a simplified version of your code:

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<button type="submit" class="flex items-center bg-gray-500 text-white hover:bg-purple-500 p-2 rounded text-sm w-auto">
  <svg class="w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
    <path fill-rule="evenodd" d="M6.707 4.879A3 3 0 018.828 4H15a3 3 0 013 3v6a3 3 0 01-3 3H8.828a3 3 0 01-2.12-.879l-4.415-4.414a1 1 0 010-1.414l4.414-4.414zm4 2.414a1 1 0 00-1.414 1.414L10.586 10l-1.293 1.293a1 1 0 101.414 1.414L12 11.414l1.293 1.293a1 1 0 001.414-1.414L13.414 10l1.293-1.293a1 1 0 00-1.414-1.414L12 8.586l-1.293-1.293z" clip-rule="evenodd" />
  </svg>
  <span>Cancel</span>
</button>

Upvotes: 5

Related Questions