Button in React

Buttons allows users to take actions and make choices with a single tap.

They (buttons) communicate the actions that users can perform. It is placed by your UI in places like below:

Modal windows
Forms
Cards
Toolbars
Basic Button

The Button comes in 3 variants: text (default), contained, and outlined.

Button in React

  import * as React from ‘react’;  import Stack from ‘@mui/material/Stack’;  import Button from ‘@mui/material/Button’;  export default function BasicButtons() {    return (      <Stack spacing={2} direction=”row”>     <Button variant=”text”>Text</Button>        <Button variant=”contained”>Contained</Button>        <Button variant=”outlined”>Outlined</Button>      </Stack>    );  }  

Text button

Text buttons are used for less-pronounced actions, including those in card dialogs. In cards, the text buttons will help us to maintain an emphasis on card content.

Button in React

  import * as React from ‘react’;  import Button from ‘@mui/material/Button’;  import Stack from ‘@mui/material/Stack’;  export default function TextButtons() {    return (      <Stack direction=”row” spacing={2}>        <Button>Primary</Button>        <Button disabled>Disabled</Button>        <Button href=”#text-buttons”>Link</Button>      </Stack>    );  }  

Contained Button

Contained buttons are high-emphasis, distinguished by the use of elevation and fill. It contains actions which are primary used in our App.

Button in React

  import * as React from ‘react’;  import Button from ‘@mui/material/Button’;  import Stack from ‘@mui/material/Stack’;  export default function ContainedButtons() {    return (      <Stack direction=”row” spacing={2}>        <Button variant=”contained”>Contained</Button>        <Button variant=”contained” disabled>          Disabled        </Button>        <Button variant=”contained” href=”#contained-buttons”>          Link        </Button>      </Stack>    );  }  

You can remove the elevation with the disable Elevation prop.

Button in React

  import * as React from ‘react’;  import Button from ‘@mui/material/Button’;  export default function DisableElevation() {    return (      <Button variant=”contained” disableElevation>        Disable elevation      </Button>    );  }  

Outlined Button

Outlined buttons are medium-emphasis buttons. They contain essential actions but not the main action in the app.

Outlined buttons are the lower alternative to contain the buttons or a higher emphasis alternative to the text buttons.

Button in React

  import * as React from ‘react’;  import Button from ‘@mui/material/Button’;  import Stack from ‘@mui/material/Stack’;  export default function OutlinedButtons() {    return (      <Stack direction=”row” spacing={2}>        <Button variant=”outlined”>Primary</Button>        <Button variant=”outlined” disabled>          Disabled        </Button>        <Button variant=”outlined” href=”#outlined-buttons”>          Link        </Button>      </Stack>    );  }  

Handling clicks

All components accept an onClick handler which is applied to the root DOM element.

  <Button    onClick={() => {      alert(‘clicked’);    }}  >    Click me  </Button>  

Note: The documentation avoid mentioning the native props in our API section of the components.

Color

Button in React

  import * as React from ‘react’;  import Stack from ‘@mui/material/Stack’;  import Button from ‘@mui/material/Button’;  export default function ColorButtons() {    return (      <Stack direction=”row” spacing={2}>        <Button color=”secondary”>Secondary</Button>        <Button variant=”contained” color=”success”>          Success        </Button>        <Button variant=”outlined” color=”error”>          Error        </Button>      </Stack>    );  }  

In addition, by using the default button colors, you can add custom or disable any you don’t need.

Size

Use this propertty for larger or smaller buttons.

Button in React

Upload button

Button in React

  import * as React from ‘react’;  import { styled } from ‘@mui/material/styles’;  import Button from ‘@mui/material/Button’;  import IconButton from ‘@mui/material/IconButton’;  import PhotoCamera from ‘@mui/icons-material/PhotoCamera’;  import Stack from ‘@mui/material/Stack’;    const Input = styled(‘input’)({    display: ‘none’,  });  export default function UploadButtons() {    return (      <Stack direction=”row” alignItems=”center” spacing={2}>        <label htmlFor=”contained-button-file”>          <Input accept=”image/*” id=”contained-button-file” multiple type=”file” />          <Button variant=”contained” component=”span”>            Upload          </Button>        </label>        <label htmlFor=”icon-button-file”>          <Input accept=”image/*” id=”icon-button-file” type=”file” />          <IconButton color=”primary” aria-label=”upload picture” component=”span”>            <PhotoCamera />          </IconButton>        </label>      </Stack>    );  }  

Buttons with label and icon

Sometimes you may want to have icons for certain buttons to enhance the UX of the application, as we acknowledge logos easier than plain text.

For example, If we want to delete button than you should label it with a dustbin icon.

Button in React

  import * as React from ‘react’;  import Button from ‘@mui/material/Button’;  import DeleteIcon from ‘@mui/icons-material/Delete’;  import SendIcon from ‘@mui/icons-material/Send’;  import Stack from ‘@mui/material/Stack’;    export default function IconLabelButtons() {    return (      <Stack direction=”row” spacing={2}>        <Button variant=”outlined” startIcon={<DeleteIcon />}>          Delete        </Button>        <Button variant=”contained” endIcon={<SendIcon />}>          Send        </Button>      </Stack>    );  }  

Icon button

Icon buttons are found in toolbars and app bars. Icons are appropriate for toggle buttons which allow the choices to be selected or deselected. Like, adding or removing any item from the label.

Button in React

  import * as React from ‘react’;  import IconButton from ‘@mui/material/IconButton’;  import Stack from ‘@mui/material/Stack’;  import DeleteIcon from ‘@mui/icons-material/Delete’;  import AlarmIcon from ‘@mui/icons-material/Alarm’;  import AddShoppingCartIcon from ‘@mui/icons-material/AddShoppingCart’;  export default function IconButtons() {    return (      <Stack direction=”row” spacing={1}>        <IconButton aria-label=”delete”>          <DeleteIcon />        </IconButton>        <IconButton aria-label=”delete” disabled color=”primary”>          <DeleteIcon />        </IconButton>        <IconButton color=”secondary” aria-label=”add an alarm”>          <AlarmIcon />        </IconButton>        <IconButton color=”primary” aria-label=”add to shopping cart”>          <AddShoppingCartIcon />        </IconButton>      </Stack>    );  }  

Sizes

Use the size prop for larger or smaller icon in button.

Button in React

  import * as React from ‘react’;  import Stack from ‘@mui/material/Stack’;  import IconButton from ‘@mui/material/IconButton’;  import DeleteIcon from ‘@mui/icons-material/Delete’;  export default function IconButtonSizes() {    return (      <Stack direction=”row” alignItems=”center” spacing={1}>        <IconButton aria-label=”delete” size=”small”>          <DeleteIcon fontSize=”inherit” />        </IconButton>        <IconButton aria-label=”delete” size=”small”>          <DeleteIcon fontSize=”small” />        </IconButton>        <IconButton aria-label=”delete” size=”large”>          <DeleteIcon />        </IconButton>        <IconButton aria-label=”delete” size=”large”>          <DeleteIcon fontSize=”inherit” />        </IconButton>      </Stack>    );  }  

Colors

Button in React

Use color prop to apply the theme color palette to the component.

  import * as React from ‘react’;  import Stack from ‘@mui/material/Stack’;  import IconButton from ‘@mui/material/IconButton’;  import Fingerprint from ‘@mui/icons-material/Fingerprint’;    export default function IconButtonColors() {    return (      <Stack direction=”row” spacing={1}>        <IconButton aria-label=”fingerprint” color=”secondary”>          <Fingerprint />        </IconButton>        <IconButton aria-label=”fingerprint” color=”success”>          <Fingerprint />        </IconButton>      </Stack>    );  }  

Customization

Button in React

Below are the examples of customizing our component.

Loading button

The loading buttons can show the loading state and disable interactions of the button.

Button in React

  import * as React from ‘react’;  import LoadingButton from ‘@mui/lab/LoadingButton’;  import SaveIcon from ‘@mui/icons-material/Save’;  import Stack from ‘@mui/material/Stack’;    export default function LoadingButtons() {    return (      <Stack direction=”row” spacing={2}>        <LoadingButton loading variant=”outlined”>          Submit        </LoadingButton>        <LoadingButton loading loadingIndicator=”Loading…” variant=”outlined”>          Fetch data        </LoadingButton>        <LoadingButton          loading          loadingPosition=”start”          startIcon={<SaveIcon />}          variant=”outlined”        >          Save        </LoadingButton>      </Stack>    );  }  

Toggle the loading button to see the transition between unrelated positions.

Button in React

Complex button

Icon button, Text button, contained buttons, and floating action buttons are built into a single component which is called as ButtonBase.

Button in React

You can take lower level component to create custom interactions.

Third-party Routing libraries

Navigating the client without an exact HTTP trip to the server is a unique use case. The ButtonBase component provides component properties to handle the use case.

Borders

ButtonBase sets the component pointer-events: none; on the disable Button, which prevents the appearance of the disabled cursor.

If you want to use “not allowed”, you have two options:

CSS only: You can remove the pointer-event style on the disabled state of < Button> element:

  .uibuttonbase-root:disabled {    cursor: not allowed;    pointer-events: auto;  ,  

Although,

You should add pointer-events: none; when you needed to display tooltips on disabled elements.

If you render anything other than the button element, then the cursor will not change. For example, a link <a> element.

DOM change. You can wrap the button:

  <span style={{ cursor: ‘not allowed’ }}>    <button component={link} disabled>      disabled    </button>  </span>  

It can support any element, for example, a link <a> element.

unstyled

The component will comes with the unstyled version. It is ideal for doing heavy optimizations and reducing bundle size.

API

<button >
<buttonbase >
<iconbutton >
<loadingButton >

How to use the button component in ReactJS?

Buttons allow users to take their actions and make choices at a single tap. This component is available to us for React UI content, and it is very easy to integrate. We can use button component in ReactJS by using following approach.

Creating react app and installing modules:

Step 1: Build a React application by using the given below command:

Step 2: After creating the project folder, and name of the folder to navigate it by using the given command:

Step 3: Install the Material-UI module using the following command, after creating the ReactJS application:

Project Structure: It will look as the following.

Button in React

project structure

App.js: Now, you have to write the below code in the App.js file.

Here, the App is the default component where we have written in our code.

JavaScript

  import React from ‘react’;  import Button from ‘@material-ui/core/Button’;      const App = () => {        return (      <div style={{        display: ‘flex’,        margin: ‘auto’,        width: 400,        flexWrap: ‘wrap’,      }}>        <div style={{ width: ‘100%’, float: ‘left’ }}>          <h3>How to use Button Component in ReactJS?</h3> <br />        </div>        <Button variant=”contained”>Default Button</Button>        <Button variant=”contained” color=”primary”>          Primary Button        </Button>        <Button variant=”contained” color=”secondary”>          Secondary Button        </Button>        <Button variant=”contained” disabled>          Disabled Button        </Button>        <Button variant=”contained” color=”primary”          href=”#”>          Link Button        </Button>      </div>    );  }   export default App;  

Steps to run the application:

Run the application by using the command from the root directory of the project:

Output: Now open your browser and go to http://localhost:3000/. You can see the below output:

Button in React

Next TopicWhat is Dom in React

Button in React

Button in React

Text button

Contained Button

Outlined Button

Handling clicks

Note: The documentation avoid mentioning the native props in our API section of the components.

Color

Size

Upload button

Buttons with label and icon

Icon button

Sizes

Colors

Customization

Loading button

Complex button

Third-party Routing libraries

Borders

API

How to use the button component in ReactJS?

Steps to run the application:

StringIO Module in Python

DTMF Based Mobile Controlled Robot

You may also like