Vuetify: [Feature Request] Buttons without Capslock

[haexhub]

Problem to solve

Could you please add a property to the v-btn, that the text is not always formatted in big letters all the time. I would like to use the v-btn with unformatted text.

Proposed solution

Add a props to the v-btn, so that people can chosse, if they want capslock or normal text.

[praveenpuglia]

@KaelWD @johnleider Even I have wished this for a really long time. Could there be a prop that does that? Something like case with values like

• uppercase
• titlecase
• user - As authored by User.

[johnleider]

I think this could be solved better with helper classes.

.text-capitalize
.text-uppercase
.text-lowercase

Then it can be used for a multitude of scenarios for developers.

[praveenpuglia]

But sometimes it's just impossible to get the case right. Specially when a button contains the name of a company or brand. Example - Coca-Cola or something like Awesome DJ. How do we address these cases?

[johnleider]

We could either add a helper for .text-normal or something similar. Additionally, you could just add a custom class to the buttons that need this and apply custom css.

[praveenpuglia]

Should I make these utilities and send a PR? We can obviously think more on this here.

[johnleider]

Let's ping @vuetifyjs/dev-team and get their opinion. It's something I would like to get in for v1.1

[chewy94]

I agree that helper classes would be the way to go. Adding a prop to handle something done with purely css seems a bit overkill

[XanderLuciano]

I'd also agree that this should be a css class. My proposal would be to add helper classes such as:
text-transform-uppercase, text-transform-lowercase, text-transform-none

Usage:
<v-btn class="text-transform-none">Continue</v-btn>

IMO this would be a simple addition and easy to use without complicating anything.

[johnleider]

These helpers have been added to v1.1 #3598

[plaa]

In the commit I see CSS classes text-capitalize, text-lowercase and text-uppercase but no option for no text transformation (text-transform: none). Am I missing something?

Would also be great to have something about this in the docs. This bug report was the only place I could find "documentation" that the feature exists, and I had to go look at the actual committed files to know what the class names were.

[danmalone89]

@plaa It's been a couple months so I'm assuming you found the answer. However, the appropriate class is actualy .text-none for anyone wondering. Here's a link to the documentation as well.

[plaa]

The problem is that the button documentation doesn't refer to this documentation in any way.

Someone (including myself) who is looking to make button texts non-capital will be looking through the 10 pages of options and examples the buttons have, and find no avail. I didn't even consider that it would be documented somewhere else, much less where to find it. I ended up writing my own CSS class for it.

[johnleider]

It doesn't refer to it because its style is assumed to be capital based upon material design spec. It would be inferred that in order to change that you would need to apply some sort of style to overwrite it. That's what you would do with any framework.

[plaa]

Would it hurt to say that text is capital by default per material design spec, and a link to the typography section if you need to change it? Maybe even have an example of it? There are use cases where capital text is just wrong.

Just trying to make the docs more helpful.

[jacekkarczmarczyk]

I agree with @plaa, it's repeating question, it could be mentioned in docs

[GENL]

Just use the class .text-none

[garyo]

I came here because I have a button that needs to be the case I set it to. Agree with others here who suggest it be included in the doc somehow.

[FredrikWendt]

Material Design spec includes several examples where button text is not capitalized. See https://material.io/design/components/buttons.html
Google Contacts is an example application that uses Camel Case for pretty much all of its buttons with text on them. Every e-mail read in Gmail ends with three outlined buttons (reply, reply all, forward) with uncapitalized button labels.

Hence, I would've preferred to set this globally and not for every single button. Cross-linking to #1443 where this was requested, and turned down.

[ColinLaws]

Instead of using .text-none everywhere (or wrapping the v-btn in my own customized implementation), I just added this to my app's scss:

.v-btn {
  text-transform:none !important;
}

However, I would say that it would be nice to do something like this:

/// vuetify.js

export default new Vuetify({
    buttons: {
        capitalize: false,
    },

    icons: {
        iconfont: 'fa',
    },
});