Material-UI is a user interface framework that provides pre-defined and customizable React components for faster and easy web development. The Material-UI components are based on top of Material Design by Google. In this article let’s discuss the ButtonBase API in the Material-UI library.
ButtonBase API offered by MUI: ButtonBase API is used as a base component in building many other buttons, such as Text Buttons, Icon Buttons or Contained Buttons. One can build many other custom buttons using this API.
ButtonBase props:
- action: It denotes a ref for the imperative actions
- centerRipple: It determines whether the ripples are centered
- children: It denotes the content of the component
- classes: It denotes the styles to override the default ones.
- component: It denotes the component used for the root node
- disabled: It determines whether the component is disabled
- disableRipple: It determines whether the ripple animation is disabled
- disableTouchRipple: It determines whether the touch ripple animation is disabled
- focusRipple: It determines whether the ButtonBasr component will have a keyboard focus ripple
- focusVisibleClassName: It helps determine which DOM elements have keyboard focus
- LinkComponent: It denotes the component used to render a link when href prop is passed
- onFocusVisible: It denotes a callback function that is triggered when the component is focused with a keyboard
- sx: It denotes a system prop that allows defining system overrides as well as additional CSS styles.
- touchRippleProps: It denotes the props passed to the TouchRipple element
- touchRippleRef: It denotes the props passed to the TouchRipple element
CSS Rules:
- root: It refers to the styles passed to the root element
- disabled: It refers to the class passed to the root element if the root element is disabled
- focusVisible: It refers to the class passed to the element if the element if focused using keyboard interactions.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install @mui/material
Project Structure: It will look like the following.
Example 1: In this example, we will try to create a simple application that uses ButtonBase API to build 3 buttons with different images as their background and text in their center.
Now write down the following code in the App.js file. Here, App is our default component where we have written our code:
App.js
import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import ButtonBase from '@mui/material/ButtonBase'; import Typography from '@mui/material/Typography'; const images = [ { url: title: 'Image 1', width: '30%', }, { url: title: 'Image 2', width: '30%', }, { url: title: 'Image 3', width: '30%', }, ]; const ImageButton = styled(ButtonBase)(({ theme }) => ({ position: 'relative', height: 200 })); const ImageSrc = styled('span')({ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, backgroundSize: 'cover', backgroundPosition: 'center 40%', }); const Image = styled('span')(({ theme }) => ({ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', color: theme.palette.common.white, })); const ImageBackdrop = styled('span')(({ theme }) => ({ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, backgroundColor: theme.palette.common.black, opacity: 0.4, })); const ImageMarked = styled('span')(({ theme }) => ({ height: 3, width: 18, backgroundColor: theme.palette.common.white, position: 'absolute', bottom: -2, left: 'calc(50% - 9px)', })); export default function BasicButtonGroup() { return ( <div> <div className="head" style={{ width: "fit-content", margin: "auto", }} > <h1 style={{ color: "green", }} > neveropen </h1> <strong>React MUI ButtonBase API</strong> <br /> <br /> </div> <div style={{ margin: "auto", }} > <Box sx={{ display: 'flex', flexWrap: 'wrap', minWidth: 300, width: '100%', gap: '5px' }}> {images.map((image) => ( <ImageButton focusRipple key={image.title} style={{ width: image.width, }} > <ImageSrc style={{ backgroundImage: `url(${image.url})` }} /> <ImageBackdrop className="MuiImageBackdrop-root" /> <Image> <Typography component="span" variant="subtitle1" color="inherit" sx={{ position: 'relative', p: 4, pt: 2, pb: (theme) => `calc(${theme.spacing(1)} + 6px)`, }} > {image.title} <ImageMarked className= "MuiImageMarked-root" /> </Typography> </Image> </ImageButton> ))} </Box> </div> </div> ); } |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Example 2: In this example, let’s change the above code to make button 2 disable and trigger a callback function whenever a button gets focused using keyboard interaction. Change your App.js like the one below.
App.js
import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import ButtonBase from '@mui/material/ButtonBase'; import Typography from '@mui/material/Typography'; const images = [ { url: title: 'Image 1', width: '30%', }, { url: title: 'Image 2', width: '30%', }, { url: title: 'Image 3', width: '30%', }, ]; const ImageButton = styled(ButtonBase)(({ theme }) => ({ position: 'relative', height: 200 })); const ImageSrc = styled('span')({ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, backgroundSize: 'cover', backgroundPosition: 'center 40%', }); const Image = styled('span')(({ theme }) => ({ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', color: theme.palette.common.white, })); const ImageBackdrop = styled('span')(({ theme }) => ({ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, backgroundColor: theme.palette.common.black, opacity: 0.4, })); const ImageMarked = styled('span')(({ theme }) => ({ height: 3, width: 18, backgroundColor: theme.palette.common.white, position: 'absolute', bottom: -2, left: 'calc(50% - 9px)', })); export default function BasicButtonGroup() { return ( <div> <div className="head" style={{ width: "fit-content", margin: "auto", }} > <h1 style={{ color: "green", }} > neveropen </h1> <strong>React MUI ButtonBase API</strong> <br /> <br /> </div> <div style={{ margin: "auto", }} > <Box sx={{ display: 'flex', flexWrap: 'wrap', minWidth: 300, width: '100%', gap: '5px' }}> {images.map((image) => ( <ImageButton focusRipple key={image.title} style={{ width: image.width, }} onFocusVisible={() => { console.log(`${image.title} focused!`); }} disabled={image.title === 'Image 2'} > <ImageSrc style={{ backgroundImage: `url(${image.url})` }} /> <ImageBackdrop className="MuiImageBackdrop-root" /> <Image> <Typography component="span" variant="subtitle1" color="inherit" sx={{ position: 'relative', p: 4, pt: 2, pb: (theme) => `calc(${theme.spacing(1)} + 6px)`, }} > {image.title} <ImageMarked className= "MuiImageMarked-root" /> </Typography> </Image> </ImageButton> ))} </Box> </div> </div> ); } |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output & Steps to see it:
- When on http://localhost:3000/ URL, press the tab (again and again to focus on different images) on your keyboard to see the output in the console.
- After the last image gets focused out, click anywhere on the page, and repeat step 1.
Reference: https://mui.com/material-ui/api/button-base/
