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',
},
You want to set display: 'flex'
and flexDirection: 'column'
for column-direction elements placement inside your button:
dummyButton: {
backgroundColor: 'green',
display: 'flex',
flexDirection: 'column'
},
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',
},
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'
}
It is semantically "incorrect" to use a div
in a button
. You should use the span
element instead.
With that being said, the Button component 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.