Basically, this is my Button right now

I want to make the Dummy Button text to appear below the icon, how do I do that?
Here is my code

<Button className={classes.dummyButton}>
  <Image
   src="/buttonImage1.webp"
   alt="buttonimage1"
   width={48}
   height={48}
   />
<span>Dummy Button</span>
</Button>

Styles.js

dummyButton: {
    backgroundColor: 'green',
  },

Basically, this is my Button right now

I want to make the Dummy Button text to appear below the icon, how do I do that?
Here is my code

<Button className={classes.dummyButton}>
  <Image
   src="/buttonImage1.webp"
   alt="buttonimage1"
   width={48}
   height={48}
   />
<span>Dummy Button</span>
</Button>

Styles.js

dummyButton: {
    backgroundColor: 'green',
  },

• javascript
• html
• reactjs
• material-ui

Share Improve this question Follow edited Feb 19, 2022 at 6:44 gem173 asked Feb 19, 2022 at 6:08 gem173gem173 3722 silver badges1010 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

You want to set display: 'flex' and flexDirection: 'column' for column-direction elements placement inside your button:

dummyButton: {
    backgroundColor: 'green',
    display: 'flex',
    flexDirection: 'column'
  },

I was trying to recreate the youtube bottom bar, and here is what I came up with.

<AppBar position="fixed" sx={{ top: 'auto', bottom: 0 }}>
  <Toolbar sx={{ justifyContent: 'space-between' }}>
    <IconButton color="inherit" sx={{ flexDirection: 'column' }}>
      <AssignmentTurnedIn />
      <Typography variant="caption">Tasks</Typography>
    </IconButton>

    <IconButton color="inherit" sx={{ flexDirection: 'column' }}>
      <CalendarMonth />
      <Typography variant="caption">Events</Typography>
    </IconButton>

    <IconButton color="inherit" sx={{ flexDirection: 'column' }}>
      <FitnessCenter />
      <Typography variant="caption">Habits</Typography>
    </IconButton>
  </Toolbar>
</AppBar>

I think you can put your image tag in another span and change its display to block.

Try this:

<Button className={classes.dummyButton}>
 <span className={classes.mySpan}>
  <Image
   src="/buttonImage1.webp"
   alt="buttonimage1"
   width={48}
   height={48}
   />
</span>
<div>Dummy Button</div>
</Button>

and your class styles should be like this:

.mySpan {
       display: 'block'
    }

try To add A <br /> tag between image and div. This what I meant. This will help you https://codepen.io/ash_000001/pen/OJOQaGp?editors=1100

<Button className={classes.dummyButton}>
  <Image
   src="/buttonImage1.webp"
   alt="buttonimage1"
   width={48}
   height={48}
   />

<div>Dummy Button</div>
</Button>
Styles.js

dummyButton: {
    backgroundColor: 'green',
 
  },

It is semantically "incorrect" to use a div in a button. You should use the span element instead.

With that being said, the Button ponent uses flexbox to control the layout/alignment of content. To align the content vertically (so the icon is above the text), you can simply change the flex-direction to column.

style.js

dummyButton: {
    backgroundColor: 'green',
    flexDirection: 'column'
  },

<Button className={classes.dummyButton}>
  <Image
   src="/buttonImage1.webp"
   alt="buttonimage1"
   width={48}
   height={48}
   />
   <span>Dummy Button</span>
</Button>