Button text shouldn't be uppercase

[tkrotoff]

Button text shouldn't be uppercase (at least by default)

https://daisyui.com/components/button/

Google (Chrome, web), Amazon, Microsoft (Windows, web), GitHub, Apple (iOS, macOS, web), Android, Facebook, KDE/Qt, GNOME... don't do that

Other web UI libs don't do that: Bootstrap, Mantine, MUI BaseUI, Spectrum, Chakra, Ant Design, PrimeReact, Grommet, Bulma, standard HTML...

Old Google Material (m2) did use uppercase buttons (and so old MUI).
This is not the case anymore: https://m3.material.io/components/all-buttons

Without uppercase (padding should be reduced btw):

Also this makes btn-link inconsistent with link:

vs

[saadeghi]

Other web UI libs don't do that: Bootstrap, Mantine, MUI BaseUI, Spectrum, Chakra, Ant Design, PrimeReact, Grommet, Bulma, standard HTML...

Material design has uppercase button text by default: https://m2.material.io/components/buttons
So does Material UI: https://mui.com/material-ui/react-button/

It's not uppercase in daisyUI by default.
It is uppercase in daisyUI's built-in themes.
But you don't have to use the built-in themes. You can customize them or you can make your own theme and use "--btn-text-case": "none" CSS variable if you don't want uppercase text:

// tailwind.config.js
module.exports = {
  plugins: [require('daisyui')],

  daisyui: {
    themes: [
      {
        light: {
          ...require("daisyui/src/theming/themes")["[data-theme=light]"],
          "--btn-text-case": "none",
        },
      },
    ],
  },
}

[tkrotoff]

Material design has uppercase button text by default

Material Design dropped uppercase buttons: https://m3.material.io/components/all-buttons

As for MUI it is based on old Material Design v2 guidelines: new v6 will be based on Material Design v3 guidelines.
Also by the same team, BaseUI and JoyUI don't have uppercase buttons.

[saadeghi]

I didn't know that.

However I don't see any reasons to drop the uppercase for the built-in default theme.
Some people prefer uppercase, some don't.
Changing this variable for the built-in themes affects all the websites made by daisyUI that use the default themes and this decision is not going to be in favor of for the people who prefer uppercase by default.

It's easy to change the CSS variable if you don't like the uppercase

[tkrotoff]

Defaults should be carefully considered: they should embody the best practices (mainly accessibility here) and not the author's personal preferences.
This is what makes the difference between a good and an excellent product.

It's not a question of "easy to change if you don't like uppercase".

Beside uppercase buttons, borderless inputs by default is also bad.

https://coyleandrew.medium.com/form-design-best-practices-9525c321d759#5759

Others don't do that: Bootstrap, Mantine, MUI BaseUI, MUI JoyUI, Spectrum, Chakra, Ant Design, PrimeReact, Bulma, standard HTML, Qt/KDE, GNOME/GTK+, Apple, Microsoft...

When there is a consensus you need strong reasons not to follow them.

[saadeghi]

I think I should make something clear here.
daisyUI is the library that provides the ability to make your own theme by defining colors (and other variables)

The built-in default themes only exist as a starting point to see how each component would look like with different colors and styles. I even made a theme generator page to encourage developers to make their own theme with custom colors and styles.

The uppercase text was not a random decision. It was already being used in Material design (used in various Google products and almost every Android)

The advantage of uppercase is gaining more attention for the buttons and makes it more obvious that it's an ACTION BUTTON. It is loud but I don't see any downside.

If there's a downside of having uppercase text for buttons, please let me know.

About inputs, it's important to make it obvious. It can be using borders or other design decisions. The article you mentioned is about forms. There are other ways to make an input obvious for example an icon, a placeholder text and a search button would make it obvious where is a search input. Design best practices are not absolute.

[tkrotoff]

The article you mentioned is about forms [...] Design best practices are not absolute

Don't miss the part where Google discover after a 4 months study and over 600 participants that fields should have a "rectangular (box) shape"

This is DaisyUI default field:

And users thinking "it's the default way so it must be the best way!"

Don't get me wrong: I love DaisyUI, its approach and the great work you put in it. I just think it could be better thx to sensible defaults.

[saadeghi]

And users thinking "it's the default way so it must be the best way!"

That wouldn't be a correct. The default is the bare minimum style of a component which can be modifier with modifier class names or Tailwind's utility classes.

It makes more sense if the default is without border and we use a modifier class name to add something (border) to it, that using a modifier class name to remove something from it.

[tkrotoff]

If there's a downside of having uppercase text for buttons, please let me know

https://material.angular.io/components/button/overview#capitalization

"[capitalizing] buttons [...] can cause issues in certain locales. [Also] using ALL CAPS in the text itself causes issues for screen-readers, which will read the text character-by-character"

^{when they say "According to the Material design spec" they are referring to the old spec - v2 instead of v3}

[saadeghi]

can cause issues in certain locales

If I'm going to do this change, I need more info? Which locales?

causes issues for screen-readers, which will read the text character-by-character

I haven't seen this issue with screen readers. Which screen reader software?

[tkrotoff]

I need more info

Couldn't find any details

Found these interesting comments that recaps all issues with ALL CAPS:

• All caps buttons and hyperlinks - not WCAG compliant? Dogfalo/materialize#4745 (comment)
• Are all-caps headings bad for accessibility? humanmade/hm-pattern-library#75 (comment)

Found this in Angular Material repo (nothing new :-/):

• MdButton docs should explain our approach to ALL CAPS angular/components#4821 (docs: add note about button capitalization angular/components#4829)
• Button should be capitalized by default per MD spec angular/components#4496
• fix(snack-bar): remove text-transform uppercase angular/components#4567

[tkrotoff]

It makes more sense if the default is without border and we use a modifier class name to add something (border)

From a technical point of vue, yes it feels satisfying and clean. However not from the user (accessibility) point of vue given the Google study.
So I would do the opposite (even if it's better from a technical point of vue to avoid negation):

<input class="input" /> // Bordered by default
<input class="input-borderless" />

<textarea class="textarea"></textarea> // Bordered by default
<textarea class="textarea-borderless"></textarea>

<select class="select"></select> // Bordered by default
<select class="select-borderless"></select>

btw, Tailwind already features border-none