Material UI - Balancing TextField and Button Heights

Question

I'm curious if there are any guidelines or recommended approaches for handling this situation. I'm currently utilizing the following Material-UI packages:

  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.14.18",
    "@mui/material": "^5.14.18",

In my React component, I have a TextField accompanied by a Search Button.

The problem is that the text field's height is significantly larger than the button's. I'm concerned that increasing the button's height might cause it to appear distorted.

Are there any guidelines for handling these situations?

Should I enforce a height in the text field to match the button's height? Or should I consider completely removing the button, leaving only the text field and expecting the user to press the Enter key? What approach would you recommend?

Answer 1

You could use a smaller version of TextField by providing the size prop:

<TextField
  defaultValue="Small"
  size="small"
/>

This should match the height of your button.

Alternatively, you could use an icon button with a search icon from the Material Icons library:

import IconButton from "@mui/material/IconButton";
import SearchIcon from "@mui/icons-material/Search";
import TextField from "@mui/material/TextField";

...

<form>
    <TextField
      variant="outlined"
      size="small"
    />
    <IconButton type="submit" aria-label="search">
      <SearchIcon style={{ fill: "blue" }} />
    </IconButton>
</form>

I wouldn't recommend removing the button, though. It usually helps to provide a visual indication that the user needs to interact with the search form.

Hope this helps! :)