slashmili
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!
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Master modern tools, write cleaner code, and tackle real-world challenges with Manning books, videos, and courses. Start building today.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #ai
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #blog-post
- #elixirconf-us
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #elixirconf-eu
- #api
- #forms
- #security
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 3- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
andreaseriksson
Look at the rounded icon buttons here:
slashmili
Thanks! it’s straight forward when element inside button is svg. But when it’s a
span(the way thaticonfunction in default core component is setup) it’s goes out of shapehttps://play.tailwindcss.com/5TEuNJR70k
tcoopman
You should say that the element is not allowed to change it’s size, for example with flex: