Square Buttons

React Bootstrap 5 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.

Basic examples

Square button

A simple square bootstrap button with equal width and height.

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

export default function App() {
  return (
    <MDBBtn className="square-md">Button</MDBBtn>
  );
}
.square-md {
  width: 100px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  height: 100px !important;
  text-align: center;
  padding: 0px;
  font-size: 12px;
}

Disable text wrapping

If you don’t want the button text to wrap, you can add the .text-nowrap class to the button. In Sass, you can set $btn-white-space: nowrap to disable text wrapping for each button.

Black square button

You can customize square button colors using CSS or our default color classes. 

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

export default function App() {
  return (
    <MDBBtn color="dark" className="square-md">
      Button
    </MDBBtn>
  );
}
.square-md {
  width: 100px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  height: 100px !important;
  text-align: center;
  padding: 0px;
  font-size:12px;
  }

Responsive square button

This square button will change its size when the viewport size changes - in accordance with default viewport breakpoints. 

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

export default function App() {
  return (
    <MDBBtn color="dark" className="square-responsive">
      Button
    </MDBBtn>
  );
}
/* Style for Extra Large Screen */
@media (max-width: 3920px) {
  .square-responsive {
    width: 200px !important;
    max-width: 100% !important;
    max-height: 100% !important;
    height: 200px !important;
    font-size: 24px;
  }
}

/* Style for Large Screen */
@media (max-width: 991px) {
  .square-responsive {
    width: 150px !important;
    max-width: 100% !important;
    max-height: 100% !important;
    height: 150px !important;
    font-size: 18px;
  }
}

/* Style for Medium Screen */
@media (max-width: 767px) {
  .square-responsive {
    width: 100px !important; /* whatever width you want for medium screen */
    max-width: 100% !important;
    max-height: 100% !important;
    height: 100px !important; /* whatever height you want for medium screen */
    font-size: 12px;
  }
}

/* Style for Small Screen */
@media (max-width: 575px) {
  .square-responsive {
    width: 50px !important; /* whatever width you want for mobile screen */
    max-width: 100% !important;
    max-height: 100% !important;
    height: 50px !important; /* whatever height you want for mobile screen */
    font-size: 5px;
    padding: 0px;
    font-size: 7px;
  }
}

Square button sizes

Small, medium, large and extra large square button sizes - mirroring the standard button behavior.

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

export default function App() {
  return (
    <>
      <MDBBtn color="secondary" className="square-sm me-1">
        Button
      </MDBBtn>
      <MDBBtn color="secondary" className="square-md me-1">
        Button
      </MDBBtn>
      <MDBBtn color="secondary" className="square-lg me-1">
        Button
      </MDBBtn>
      <MDBBtn color="secondary" className="square-xl me-1">
        Button
      </MDBBtn>
    </>
  );
}
.square-sm {
  width: 50px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  height: 50px !important;
  text-align: center;
  padding: 0px;
  font-size: 7px;
}

.square-md {
  width: 100px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  height: 100px !important;
  text-align: center;
  padding: 0px;
  font-size: 12px;
}

.square-lg {
  width: 150px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  height: 150px !important;
  text-align: center;
  padding: 0px;
  font-size: 18px;
}

.square-xl {
  width: 200px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  height: 200px !important;
  text-align: center;
  padding: 0px;
  font-size: 24px;
}

Colors

MDB includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control. 

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

export default function App() {
  return (
    <>
      <MDBBtn color="primary" className="square-md m-1">
        Primary
      </MDBBtn>
      <MDBBtn color="secondary" className="square-md m-1">
        Secondary
      </MDBBtn>
      <MDBBtn color="success" className="square-md m-1">
        Success
      </MDBBtn>
      <MDBBtn color="danger" className="square-md m-1">
        Danger
      </MDBBtn>
      <MDBBtn color="warning" className="square-md m-1">
        Warning
      </MDBBtn>
      <MDBBtn color="info" className="square-md m-1">
        Info
      </MDBBtn>
      <MDBBtn color="light" rippleColor="dark" className="square-md m-1">
        Light
      </MDBBtn>
      <MDBBtn color="dark" className="square-md m-1">
        Dark
      </MDBBtn>
      <MDBBtn color="link" rippleColor="dark" className="square-md m-1">
        Link
      </MDBBtn>
    </>
  );
}
.square-md {
  width: 100px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  height: 100px !important;
  text-align: center;
  padding: 0px;
  font-size: 12px;
}

Conveying meaning to assistive technologies:
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Outline

In need of a button, but not the hefty background colors they bring? Add outline property to remove all background images and colors on any button. 

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

export default function App() {
  return (
    <>
      <MDBBtn
        outline
        color="primary"
        rippleColor="dark"
        className="square-md me-1"
      >
        Primary
      </MDBBtn>
      <MDBBtn
        outline
        color="secondary"
        rippleColor="dark"
        className="square-md me-1"
      >
        Secondary
      </MDBBtn>
      <MDBBtn
        outline
        color="success"
        rippleColor="dark"
        className="square-md me-1"
      >
        Success
      </MDBBtn>
      <MDBBtn
        outline
        color="danger"
        rippleColor="dark"
        className="square-md me-1"
      >
        Danger
      </MDBBtn>
      <MDBBtn
        outline
        color="warning"
        rippleColor="dark"
        className="square-md me-1"
      >
        Warning
      </MDBBtn>
      <MDBBtn
        outline
        color="info"
        rippleColor="dark"
        className="square-md me-1"
      >
        Info
      </MDBBtn>
      <MDBBtn
        outline
        color="light"
        rippleColor="dark"
        className="square-md me-1"
      >
        Light
      </MDBBtn>
      <MDBBtn
        outline
        color="dark"
        rippleColor="dark"
        className="square-md me-1"
      >
        Dark
      </MDBBtn>
    </>
  );
}
.square-md {
  width: 100px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  height: 100px !important;
  text-align: center;
  padding: 0px;
  font-size: 12px;
}

Social

Combining our icons and custom colors you can create social buttons. Combining our icons and custom colors you can create social buttons. See all available icons in our icons search (check "brands" to filter brand icons).

In the example below, we place a Facebook icon <MDBIcon fab icon="facebook-f" /> inside the button and set a background-color to #3B5998 (facebook brand color). 

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

export default function App() {
  return (
    <>
      <MDBBtn
        href="#!"
        className="square-social d-flex align-items-center justify-content-center"
        style={{ backgroundColor: "#3b5998" }}
      >
        <MDBIcon
          fab
          icon="facebook-f"
          className="d-flex align-items-center justify-content-center"
        />
      </MDBBtn>
    </>
  );
}
.square-social {
  width: 70px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  height: 70px !important;
  text-align: center;
  font-size: 15px;
}

Sample brands

A few the most popular brands in form of social square buttons.

import React from "react";
import { MDBBtn, MDBIcon, MDBRow } from "mdb-react-ui-kit";

export default function App() {
  return (
    <>
      <MDBRow>
        <MDBBtn
          className="m-1 square-social d-flex justify-content-center"
          style={{ backgroundColor: "#3b5998" }}
          href="#!"
        >
          <MDBIcon
            fab
            icon="facebook-f"
            className="d-flex align-items-center"
          />
        </MDBBtn>

        <MDBBtn
          className="m-1 square-social d-flex justify-content-center"
          style={{ backgroundColor: "#55acee" }}
          href="#!"
        >
          <MDBIcon fab icon="twitter" className="d-flex align-items-center" />
        </MDBBtn>

        <MDBBtn
          className="m-1 square-social d-flex justify-content-center"
          style={{ backgroundColor: "#dd4b39" }}
          href="#!"
        >
          <MDBIcon fab icon="google" className="d-flex align-items-center" />
        </MDBBtn>

        <MDBBtn
          className="m-1 square-social d-flex justify-content-center"
          style={{ backgroundColor: "#ac2bac" }}
          href="#!"
        >
          <MDBIcon fab icon="instagram" className="d-flex align-items-center" />
        </MDBBtn>

        <MDBBtn
          className="m-1 square-social d-flex justify-content-center"
          style={{ backgroundColor: "#0082ca" }}
          href="#!"
        >
          <MDBIcon
            fab
            icon="linkedin-in"
            className="d-flex align-items-center"
          />
        </MDBBtn>

        <MDBBtn
          className="m-1 square-social d-flex justify-content-center"
          style={{ backgroundColor: "#c61118" }}
          href="#!"
        >
          <MDBIcon fab icon="pinterest" className="d-flex align-items-center" />
        </MDBBtn>

        <MDBBtn
          className="m-1 square-social d-flex justify-content-center"
          style={{ backgroundColor: "#4c75a3" }}
          href="#!"
        >
          <MDBIcon fab icon="vk" className="d-flex align-items-center" />
        </MDBBtn>

        <MDBBtn
          className="m-1 square-social d-flex justify-content-center"
          style={{ backgroundColor: "#ffac44" }}
          href="#!"
        >
          <MDBIcon
            fab
            icon="stack-overflow"
            className="d-flex align-items-center"
          />
        </MDBBtn>

        <MDBBtn
          className="m-1 square-social d-flex justify-content-center"
          style={{ backgroundColor: "#ed302f" }}
          href="#!"
        >
          <MDBIcon fab icon="youtube" className="d-flex align-items-center" />
        </MDBBtn>

        <MDBBtn
          className="m-1 square-social d-flex justify-content-center"
          style={{ backgroundColor: "#481449" }}
          href="#!"
        >
          <MDBIcon
            fab
            icon="slack-hash"
            className="d-flex align-items-center"
          />
        </MDBBtn>

        <MDBBtn
          className="m-1 square-social d-flex justify-content-center"
          style={{ backgroundColor: "#333333" }}
          href="#!"
        >
          <MDBIcon fab icon="github" className="d-flex align-items-center" />
        </MDBBtn>

        <MDBBtn
          className="m-1 square-social d-flex justify-content-center"
          style={{ backgroundColor: "#ec4a89" }}
          href="#!"
        >
          <MDBIcon fab icon="dribbble" className="d-flex align-items-center" />
        </MDBBtn>

        <MDBBtn
          className="m-1 square-social d-flex justify-content-center"
          style={{ backgroundColor: "#ff4500" }}
          href="#!"
        >
          <MDBIcon
            fab
            icon="reddit-alien"
            className="d-flex align-items-center"
          />
        </MDBBtn>

        <MDBBtn
          className="m-1 square-social d-flex justify-content-center"
          style={{ backgroundColor: "#25d366" }}
          href="#!"
        >
          <MDBIcon fab icon="whatsapp" className="d-flex align-items-center" />
        </MDBBtn>
      </MDBRow>
    </>
  );
}
.square-social {
  width: 70px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  height: 70px !important;
  text-align: center;
  font-size: 15px;
}

Disabled state

Make buttons look inactive by adding the disabled boolean attribute to any <MDBBtn> element. Disabled buttons have pointer-events: none applied to, preventing hover and active states from triggering. 

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

export default function App() {
  return (
    <>
      <MDBBtn className="me-2 square-lg" disabled>
        Primary button
      </MDBBtn>
      <MDBBtn className="square-lg" color="secondary" disabled>
        Button
      </MDBBtn>
    </>
  );
}
.square-lg {
  width: 150px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  height: 150px !important;
  text-align: center;
  padding: 0px;
  font-size: 18px;
}

Toggle states

Add toggle property to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the property. 

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

export default function App() {
  return (
    <>
      <MDBBtn className="square-lg" toggle>
        Toggle button
      </MDBBtn>
      <MDBBtn className="mx-2 square-lg" toggle active>
        Active toggle button
      </MDBBtn>
      <MDBBtn className="square-lg" toggle disabled>
        Disabled toggle button
      </MDBBtn>
    </>
  );
}
.square-lg {
  width: 150px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  height: 150px !important;
  text-align: center;
  padding: 0px;
  font-size: 18px;
}