# Buttons

You can add the component on any page in the template. You need to follow the steps given below:&#x20;

**Step 1:** Please add the code given below in the page where you want to add the component.

```
<MatButton variant="contained" color="primary" className="mr-10 mb-10 text-white"> 
    Primary
</MatButton>
```

**Step 2:** Now Import the component from its parent library.

```
import MatButton from '@material-ui/core/Button';
```

We have given you an example of adding a raised button on the Ecommerce Dashboard.

![](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LbwLf7-N3LlKXnYcDpL%2F-LbwSEiBTzHvy4y7kUB0%2FSelection_029.png?alt=media\&token=f21c29ac-56ec-4b1c-ac84-c3fd14f39402)

You can check some other layouts of buttons below. For adding any of the below layout in the template, please check their relative code in the `src->routes->components->buttons->index.js` file.&#x20;

![](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LbheFiWpzGMLKLNURNh%2F-LbheP8qpj6qBNdpfs4_%2FScreenshot%202019-04-05%20at%206.42.43%20PM.png?alt=media\&token=d11a38c7-5658-4c56-99fe-a0fb58c50669)

![](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LbheFiWpzGMLKLNURNh%2F-LbheR3jaQHGii5bqfsp%2FScreenshot%202019-04-05%20at%206.42.59%20PM.png?alt=media\&token=10d53def-40e8-4c28-8e9b-34882c148cda)

![](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LbheFiWpzGMLKLNURNh%2F-LbheTWMk0X0QfuC_ooG%2FScreenshot%202019-04-05%20at%206.43.11%20PM.png?alt=media\&token=4fd0dce1-9467-4268-84e9-87f06e079009)
