3 replies

button with icon break vertical position alignment

I'm trying to keep two button on the same level, but the button with an icon in it breaks the vertical alignment. I've tried to Google for answer but I couldn't come up with the right keywords for this bug.

Desired behaviour
Two buttons stay on the same level vertically

Actual behaviour
The button with icon 'jumped' up from it's supposed position

I'm using tailwindcss and lucide icons.

I have not been very good at css and finding resources/solution related to css so any help is appreciated. Thanks in advanced!

The Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Button with icon</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
  </head>
  <body>
    <div class="border border-red-500">
      <button
        class="text-md inline-flex h-9 items-center justify-center rounded-md bg-slate-500 p-2"
      >
        Button
      </button>
      <button
        class="text-md inline-flex h-9 items-center justify-center rounded-md bg-slate-500 p-2"
      >
        <i data-lucide="chevron-left"></i>With Icon
      </button>
    </div>
    <script>
      lucide.createIcons();
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Button with icon</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
  </head>
  <body>
    <div class="border border-red-500">
      <button
        class="text-md inline-flex h-9 items-center justify-center rounded-md bg-slate-500 p-2"
      >
        Button
      </button>
      <button
        class="text-md inline-flex h-9 items-center justify-center rounded-md bg-slate-500 p-2"
      >
        <i data-lucide="chevron-left"></i>With Icon
      </button>
    </div>
    <script>
      lucide.createIcons();
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Button with icon</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
  </head>
  <body>
    <div class="border border-red-500">
      <button
        class="text-md inline-flex h-9 items-center justify-center rounded-md bg-slate-500 p-2"
      >
        Button
      </button>
      <button
        class="text-md inline-flex h-9 items-center justify-center rounded-md bg-slate-500 p-2"
      >
        <i data-lucide="chevron-left"></i>With Icon
      </button>
    </div>
    <script>
      lucide.createIcons();
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Button with icon</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
  </head>
  <body>
    <div class="border border-red-500">
      <button
        class="text-md inline-flex h-9 items-center justify-center rounded-md bg-slate-500 p-2"
      >
        Button
      </button>
      <button
        class="text-md inline-flex h-9 items-center justify-center rounded-md bg-slate-500 p-2"
      >
        <i data-lucide="chevron-left"></i>With Icon
      </button>
    </div>
    <script>
      lucide.createIcons();
    </script>
  </body>
</html>

button with icon break vertical position alignment

Similar Threads

Similar Threads

Similar Threads