Categories
React Answers

How to create button with text under the icon with React Material UI?

Spread the love

Sometimes, we want to create button with text under the icon with React Material UI.

In this article, we’ll look at how to create button with text under the icon with React Material UI.

How to create button with text under the icon with React Material UI?

To create button with text under the icon with React Material UI, we can set the flexDirection of the button container.

For instance, we write:

import React from "react";
import Button from "@material-ui/core/Button";
import Settings from "@material-ui/icons/Settings";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(() => ({
  button: {
    height: 95
  },
  label: {
    flexDirection: "column"
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div>
      <Button
        classes={{ root: classes.button, label: classes.label }}
        variant="raised"
        color="primary"
        disableRipple={true}
      >
        <Settings className={classes.icon} />
        Message
      </Button>
    </div>
  );
}

We call makeStyles with a function that has the label class property that sets flexDirection to 'column'.

Then we set that as the returned classes as the value of the classes prop.

As a result, we should see that ‘Message’ is below the settings icon.

Conclusion

To create button with text under the icon with React Material UI, we can set the flexDirection of the button container.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.