how to change button size in react js?
June 11, 2022To change button size in react js, you can use width and height css attribute, these attributes help you change size of button in react js.
See short example of change button size in react js using inline css style.
<button style={{ width: "100px", height: "50px",}} type="submit">Submit</button>In this article, we will see different ui packages buttons example and how to change their button size.
See following examples which we are going to cover.
- Example to change button height and width
- Example to change react bootstrap button height and width
- Example to change mui button height and width
- Example to change antd button height and width
Example to change button height and width
In this example, I will use default button componant and change their height and width using custom css class.
APP.js
import React from "react";
import "./styles.css";
const App = () => {
return (
<div>
<button className="btn" type="submit">
Submit
</button>
</div>
);
};
export default App;styles.css
.btn {
height: 50px;
width: 300px;
}Here, we are provided code sandbox links for the above program example change button size using CSS. Then you can use whenever you went and do the changes as per your requirements.
You can use below link for check output of above program.
Example to change react bootstrap button height and width
In this example, I will use react-bootstrap package button and try to customize their size.
Here, react-bootstrap package provide size attribute where you can pass sm and lg to change button size.
But if you want change size as per your pixel, I’m provide custom react bootstrap button example.
APP.js
import { Button } from "react-bootstrap";
import "./styles.css";
function SizesExample() {
return (
<>
<div className="m-2">
<div className="mb-2">
<Button variant="primary" size="lg">
Large button
</Button>{" "}
<Button variant="secondary" size="lg">
Large button
</Button>
</div>
<div className="mb-2">
<Button variant="primary" size="sm">
Small button
</Button>{" "}
<Button variant="secondary" size="sm">
Small button
</Button>
</div>
<div className="mb-2">
<Button variant="primary" className="custom-btn">
Custom button
</Button>
</div>
</div>
</>
);
}
export default SizesExample;styles.css
.custom-btn {
height: 50px;
width: 300px;
}Here, we are provided code sandbox links for the above program example change react bootstrap button size using CSS. Then you can use whenever you went and do the changes as per your requirements.
You can use below link for check output of above program.
Example to change mui button height and width
In this example, I will use mui package button and try to customize their size.
Here, mui material package provide size attribute where you can pass small, medium and large to change button size.
But if you want change size as per your pixel, I’m provide custom react mui button example.
APP.js
import * as React from "react";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import "./styles.css";
export default function ButtonSizes() {
return (
<Box sx={{ "& button": { m: 1 } }}>
<div>
<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>
</div>
<div>
<Button variant="outlined" size="small">
Small
</Button>
<Button variant="outlined" size="medium">
Medium
</Button>
<Button variant="outlined" size="large">
Large
</Button>
</div>
<div>
<Button variant="contained" size="small">
Small
</Button>
<Button variant="contained" size="medium">
Medium
</Button>
<Button variant="contained" size="large">
Large
</Button>
</div>
<div>
<Button variant="contained" className="custom-btn">
Custom Button
</Button>
</div>
</Box>
);
}styles.css
.custom-btn {
height: 50px;
width: 300px;
}Here, we are provided code sandbox links for the above program example change material button size using CSS. Then you can use whenever you went and do the changes as per your requirements.
You can use below link for check output of above program.
Example to change antd button height and width
In this example, I will use antd package button and try to customize their size.
Here, the ant design package provide size attribute where you can pass small, medium and large to change button size.
But if you want change size as per your pixel, I’m provide custom react antd button example.
APP.js
import { Button, Space } from "antd";
import "./styles.css";
const App = () => (
<Space wrap>
<Button type="primary" size="small">
Small Button
</Button>
<Button type="primary" size="middle">
Middle Button
</Button>
<Button type="primary" size="large">
Large Button
</Button>
<Button type="primary" className="custom-btn">
Custom Button
</Button>
</Space>
);
export default App;styles.css
.custom-btn {
height: 50px;
width: 300px;
}Here, we are provided code sandbox links for the above program example change ant design button size using CSS. Then you can use whenever you went and do the changes as per your requirements.
You can use below link for check output of above program.
All the best 👍
