Reactstrap Buttons

Use Bootstrap buttons and Bootstrap custom styles for actions in forms, dialogues, and more with support for multiple sizes, states, and more.

Props

Reactstrap provides different styles of buttons:

color="default"
color="primary"
color="success"
color="info"
color="warning"
color="danger"
color="link"
outline color="default"
outline color="primary"
outline color="success"
outline color="info"
outline color="warning"
outline color="danger"

Examples

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

import React from "react";

// reactstrap components
import { Button } from "reactstrap";

function Example() {
  return (
    <>
      <Button color="primary" type="button">
        Button
      </Button>
      <Button className="btn-icon btn-3" color="primary" type="button">
        <span className="btn-inner--icon">
          <i className="ni ni-bag-17"></i>
        </span>
        <span className="btn-inner--text">With icon</span>
      </Button>
      <Button className="btn-icon btn-2" color="primary" type="button">
        <span className="btn-inner--icon">
          <i className="ni ni-atom"></i>
        </span>
      </Button>
    </>
  );
}

export default Example;

import React from "react";

// reactstrap components
import { Button } from "reactstrap";

function Example() {
  return (
    <>
      <Button color="default" type="button">
        Default
      </Button>
      <Button color="primary" type="button">
        Primary
      </Button>
      <Button color="secondary" type="button">
        Secondary
      </Button>
      <Button color="info" type="button">
        Info
      </Button>
      <Button color="success" type="button">
        Success
      </Button>
      <Button color="danger" type="button">
        Danger
      </Button>
      <Button color="warning" type="button">
        Warning
      </Button>
    </>
  );
}

export default Example;

Outline buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier styles by adding outline prop to remove all background images and colors on any button.

import React from "react";

// reactstrap components
import { Button } from "reactstrap";

function Example() {
  return (
    <>
      <Button outline color="default" type="button">
        Default
      </Button>
      <Button outline color="primary" type="button">
        Primary
      </Button>
      <Button outline color="secondary" type="button">
        Secondary
      </Button>
      <Button outline color="info" type="button">
        Info
      </Button>
      <Button outline color="success" type="button">
        Success
      </Button>
      <Button outline color="danger" type="button">
        Danger
      </Button>
      <Button outline color="warning" type="button">
        Warning
      </Button>
    </>
  );
}

export default Example;

Sizes

Fancy larger or smaller buttons? Add size="lg" or size="sm" for additional sizes.

import React from "react";

// reactstrap components
import { Button } from "reactstrap";

function Example() {
  return (
    <>
      <Button color="primary" size="lg">Large button</Button>
      <Button color="secondary" size="lg">Large button</Button>
    </>
  );
}

export default Example;

import React from "react";

// reactstrap components
import { Button } from "reactstrap";

function Example() {
  return (
    <>
      <Button color="primary" size="sm">Small button</Button>
      <Button color="secondary" size="sm">Small button</Button>
    </>
  );
}

export default Example;

Create block level buttons—those that span the full width of a parent—by adding block prop.

import React from "react";

// reactstrap components
import { Button } from "reactstrap";

function Example() {
  return (
    <>
      <Button block color="primary" size="lg">Block level button</Button>
      <Button block color="secondary" size="lg">Block level button</Button>
    </>
  );
}

export default Example;

Active state

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. There’s no need to add a class to <button>s as they use a pseudo-class. However, you can still force the same active appearance with active (and include the aria-pressed="true" attribute) should you need to replicate the state programmatically.

Primary link Link

import React from "react";

// reactstrap components
import { Button } from "reactstrap";

function Example() {
  return (
    <>
      <Button
        color="primary"
        size="lg"
        active
        aria-pressed="true"
        href="#pablo"
        onClick={(e) => e.preventDefault()}
      >
        Primary Link
      </Button>
      <Button
        color="secondary"
        size="lg"
        active
        aria-pressed="true"
        href="#pablo"
        onClick={(e) => e.preventDefault()}
      >
        Link
      </Button>
    </>
  );
}

export default Example;

Disabled state

Make buttons look inactive by adding the disabled boolean attribute to any <button> element.

import React from "react";

// reactstrap components
import { Button } from "reactstrap";

function Example() {
  return (
    <>
      <Button disabled color="primary" size="lg">Primary button</Button>
      <Button disabled color="secondary" size="lg">Button</Button>
    </>
  );
}

export default Example;

Props

If you want to see more examples and properties please check the official Reactstrap Documentation.