docs: Square buttons are not square

[Rattone]

On which page do you see this issue?

https://daisyui.com/components/button/#square-button

Describe the issue

Is that normal?

What browsers are you seeing the problem on?

Chrome

[github-actions]

Thank you @Rattone for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[sovetski]

If I am not wrong, it is related to the theme that you selected on the website.

In some themes, border radius are different, I confirm that it's a bit unsettling at first.

[saadeghi]

Related:
#2771

Wouldn't it feel weird when all elements of a theme have huge border radius and one button has sharp edges?

[sovetski]

@saadeghi maybe in this case, perhaps it would be necessary to add more advanced configuration options to allow for more customization? For example, instead of being able to change only radius, we could also change square-radius to be a bit more specific? Because there are already 2 issues from 2 different people, and I was also unsettled by this behavior at first.

Maybe you could also consider adding border configurations in the theme generator here?: Theme Generator

[Rattone]

@saadeghi thanks for the reply, I'm not familiar with the library and I didn't realize this theme thing :-)
With a "squared" theme I can have circular buttons but with a rounded theme I can't have square buttons... does that make sense?

[saadeghi]

With a "squared" theme I can have circular buttons but with a rounded theme I can't have square buttons... does that make sense?

Yes. It's a common design pattern to use rounded corners occasionally but it's not a common pattern to use a sharp edge square when everything else is circle.
Look at the top right corner of this page (GitHub) and you see one circle button while every other button has less radius.

daisyUI class names are opinionated based on common design patterns but at the end you are free to overwrite everything using utility classes. You can use Tailwind CSS rounded-* utility classes to change the radius as you wish.