Circular button with heroicon

Phoenix Forum Questions / Help
,
1

I’m trying to create a circular button using the following code(using phoenix + tailwind)

<button class="bg-violet-700 text-slate-50 rounded-full p-3">
  <span class="hero-arrow-right w-4 h-4"></span>
</button>

but for some reason the button tries to apply line-height 24px and make button oval shape. I can add leading-4 to force the line height to 16px but I’d prefer to avoid that since this a component that I want to reuse for text and icons.

I tried to isolate the html/css in tailwind playground https://play.tailwindcss.com/VTdFLa0iVb

what other options beside setting line-height do I have?

Thanks!

2

Look at the rounded icon buttons here:

1 Like
3

Thanks! it’s straight forward when element inside button is svg. But when it’s a span (the way that icon function in default core component is setup) it’s goes out of shape :thinking:

https://play.tailwindcss.com/5TEuNJR70k

4

You should say that the element is not allowed to change it’s size, for example with flex:


<button type="button" class="flex text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none  font-medium rounded-full text-sm p-2.5  me-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
  <span class="flex-grow-0 block hero-arrow-right h-4 w-4"> </span>
</button>