CODEWITHSUNDEEP
javascriptreactjssemantic-uisemantic-ui-react
SeaWarrior404
SeaWarrior404

Reputation: 4167

How to position label under icon in Semantic UI-React?

Im using Semantic UI-React. My question is how to position a label or text under an icon? There are only two default options which is left and right of the icon. However I want to position the label below the icon. Im using Semantic-React library.

For example:

<Button icon labelPosition='left'>
  <Icon name='pause' />
  Pause
</Button>

In the above snippet the label 'Pause' is added on the left side of the icon in the button. My requirement is, I want to add the label 'Pause below the icon in the button'. I tried setting the:

    labelPosition='down' or 'bottom'

However it does not work. Is there any way to do this?

Upvotes: 2

Views: 3023

Answers (2)

Danny Guo
Danny Guo

Reputation: 1002

Put a line break between the icon and the text.

<Button icon>
  <Icon name='pause' />
  <br />
  Pause
</Button>

To change the amount of space between the icon and the text, you can add margin to the line break.

<Button icon>
  <Icon name='pause' />
  <br style={{marginBottom: '8px'}} />
  Pause
</Button>

Upvotes: 1

A J A Y
A J A Y

Reputation: 654

I came across the same problem. I believe that this could be done only by overriding the CSS properties of the Button element. Please try providing !important to the CSS values, since semantic UI takes the highest priority when it comes to priority of the properties.

You can either use a class and define the style there, or else use a specific selector like this: div.ui.stackable.two.column.grid.button{.

Please let me know if this fixes, otherwise I have another solution to it.

Upvotes: 1

Related Questions