CODEWITHSUNDEEP
ionic-frameworkionic4
Basik Dev team
Basik Dev team

Reputation: 171

ion-button in ionic v4 the text is uppercase

I have a problem with ion-button in ionic v4 If I write in my app

<ion-button>Hi</ion-button>

Erro upercase

And run the application, the app show the button with te text in uppercase I need the buttons to be shown with the text as I wrote it. Please

Upvotes: 14

Views: 21462

Answers (5)

Talented blockchain developer
Talented blockchain developer

Reputation: 357

You can add this style in the global.scss ion-button { text-transform: none; } I have tested this code and it works well

Upvotes: 4

Raghuram
Raghuram

Reputation: 52665

In ionic-5, in theme/variables.css, you could add the following

ion-button {
 text-transform: none;
}

This would apply for the entire app. Also refer this github issue comment.

Upvotes: 44

dmitry fedorov
dmitry fedorov

Reputation: 49

Try to use mode="ios". Tested on ionic 5 :

<ion-button mode="ios">Your Text</ion-button>

Upvotes: 4

P&#233;ttrin Miranda
P&#233;ttrin Miranda

Reputation: 279

Try to use text-capitalize, for every first words in UperCase

<span text-capitalize>hi</span>

enter image description here

or text-transform, for normal text

<span style="text-transform:none!important;">Hi Hi</span>

enter image description here

For more examples and other utilities check this doc, you'll like!

Upvotes: 12

Kishan Bharda
Kishan Bharda

Reputation: 5700

You can solve it by adding just inline css as following :

<ion-button style="text-transform:none">Your Text</ion-button>

Upvotes: 8

Related Questions