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.
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.