Change button text default style to First Character Capitalized

[bigradish]

What happened?

According to Material design 3, "Sentence case"(First Character Capitalized) should be used instead of "ALL CAPS".
Thank you very much.

What did you expect to happen?

"Sentence case"(First Character Capitalized) should be applied by default in button text.

Reproduction URL

https://codepen.io/pen?&editors=101

How to reproduce?

Just see the url

Flavour

Vite Plugin (@quasar/vite-plugin)

Areas

Components (quasar)

Platforms/Browsers

No response

Quasar info output

Relevant log output

Additional context

No response

[FragsterAt]

You can change default value this way (call it before using any quasar component):

import { QBtn } from 'quasar'

QBtn.props.noCaps = { type: Boolean, default: true }

It works with almost all props, but be careful. It can (sometimes) break something.
I.e. QSelect.props.emitValue = { type: Boolean, default: true } breaks page size selection in QTable.

Another option is to create your own wrapper component. If you're using typescript, you can get all original props in IDE intellisence:

<template>
  <q-btn
    :no-caps
    v-bind="parentProps"
  />
</template>

<script setup lang="ts">
import type {QBtnProps} from 'quasar'

const {noCaps = true, ...parentProps} = defineProps<QBtnProps>()
</script>

[bigradish]

@FragsterAt Thank you very much for providing good workarounds. :)

[rstoenescu]

Hi,

Changing to first letter capitalized would be a too heavy breaking change. Considering this for Quasar v3 though. For now, just use info from the excellent post from @FragsterAt