Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/mdbootstrap/react-square-buttons

Responsive React Square Buttons built with Bootstrap 5 & HTML. Disabled button, black, full-width outline, social button, big button, block square button & more. https://mdbootstrap.com/docs/react/extended/square-buttons/
https://github.com/mdbootstrap/react-square-buttons

bootstrap bootstrap-template bootstrap-theme bootstrap5 buttons css html js react square

Last synced: 2 months ago
JSON representation

Responsive React Square Buttons built with Bootstrap 5 & HTML. Disabled button, black, full-width outline, social button, big button, block square button & more. https://mdbootstrap.com/docs/react/extended/square-buttons/

Awesome Lists containing this project

README 

          
![MDB Logo](https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-react.png)



# MDB React 5



Responsive React Square Buttons built with Bootstrap 5 & HTML. Disabled button, black, full-width outline, social button, big button, block square button & more.



Check out [React Square Buttons Documentation](https://mdbootstrap.com/docs/react/extended/square-buttons) for detailed instructions & even more examples.



## Basic example

![Basic example](https://user-images.githubusercontent.com/108793661/186597809-3b4814bc-78e6-49c0-af32-bf5f0511a4d7.png)

```js

import React from "react";

import { MDBBtn } from "mdb-react-ui-kit";



export default function App() {

  return (

    Button

  );

}

```



```css

.square-md {

  width: 100px !important;

  max-width: 100% !important;

  max-height: 100% !important;

  height: 100px !important;

  text-align: center;

  padding: 0px;

  font-size: 12px;

}

```



## How to use?



1. Download MDB 5 - FREE REACT UI KIT



2. Choose your favourite customized component and click on the image



3. Copy & paste the code into your MDB project



[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)



## More examples (click on the image to see a live demo)

### Black square button:

[![React Square Buttons #1](https://user-images.githubusercontent.com/108793661/186598047-b333e7a6-7eb9-4e82-b491-449dc92061c6.png)](https://mdbootstrap.com/docs/react/extended/square-buttons#black-button)



### Responsive square button:

[![React Square Buttons #2](https://user-images.githubusercontent.com/108793661/186598335-12b58da9-f7cc-43a7-8c44-24eecf418a12.png)](https://mdbootstrap.com/docs/react/extended/square-buttons#responsive-button)



### Square button sizes:

[![React Square Buttons #3](https://user-images.githubusercontent.com/108793661/186598471-a1b662e8-19ed-4ea0-b4cf-aa71feeeacf7.png)](https://mdbootstrap.com/docs/react/extended/square-buttons#sizes)



### Colors:

[![React Square Buttons #4](https://user-images.githubusercontent.com/108793661/186598622-8b74461d-0c74-46b4-9629-b9574718b8f4.png)](https://mdbootstrap.com/docs/react/extended/square-buttons#colors)



### Outline:

[![React Square Buttons #5](https://user-images.githubusercontent.com/108793661/186598725-54afa10e-4f6e-4394-bc12-540e97d92204.png)](https://mdbootstrap.com/docs/react/extended/square-buttons#outline)



You can find other examples [here](https://mdbootstrap.com/docs/react/extended/square-buttons).






## More extended React documentation