How to add styles to ion-button inner text?

Ionic Framework
1

So i have this:

<ion-button color="primary" size="large"  class="button-inner" style="min-width: 10em;" href="/home">
     open my <br />
     new app
</ion-button>

its all in capitals in two rows, how can i make “open my” be only capitalize and look like this “Open my” and how can i have “Open my” be smaller font size than “NEW APP”

I’ve tried using spans or p but i lose the two level text

my idea is something like this:

image

I’m using Ionic v4

2

maybe?

<ion-label>open my</ion-label>
<ion-label text-uppercase>new app</ion-label>

or with a div

<div>
<ion-label>open my</ion-label>
<ion-label text-uppercase>new app</ion-label>
</div>
3

Nope, tried that already and nothing

4 
<ion-button color="primary" size="large">
    <div>
      <p no-margin text-lowercase><ion-label>open my</ion-label></p>
      <p no-margin><ion-label text-uppercase>new app</ion-label></p>
    </div>
  </ion-button>

28
Capture d’écran 2018-12-01 à 14.41.28.png1236×498 23 KB

5

AFAIK you can’t access any attributes in the shadow dom that have not been exposed via CSS properties.
I’ve got the same problem and have raised a feature request.

6

All of the text properties that can be inherited are inherited in a button. So the following would work in the case of a button to target all of the text:

ion-button {
  text-transform: none;
}

Here’s a larger list of the inheritable font properties:

font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
letter-spacing: inherit;
text-decoration: inherit;
text-overflow: inherit;
text-transform: inherit;
text-align: inherit;
white-space: inherit;

However, for the original comment, because you want them to be different while inside of the button and you have full control over the text you are adding in the button, you should wrap the text you want to customize in a span and a div.

<ion-button size="large" class="two-lines">
  <div>
    <span>Open my</span><br>
    new app
  </div>
</ion-button>

.two-lines {
  min-width: 10em;
}

.two-lines span {
  text-transform: none;
  font-size: 14px;
}

Here’s a Codepen example of styling buttons: https://codepen.io/brandyscarney/pen/gqKGNv?editors=1100#0

7

That’s fantastic! Thanks for the quick and helpful response Brandy :smiley:

1 Like