Reactstrap — Button Groups

Image for post
Image for post
Photo by Hermes Rivera on Unsplash

Reactstrap is a version Bootstrap made for React.

It’s a set of React components that have Boostrap styles.

In this article, we’ll look at how to add button groups with Reactstrap.

Button Groups

Button groups is a container for grouping buttons together.

For example, we can write:

We add the ButtonGroup component with a few Button s inside.

They’ll be displayed side by side without any gaps in between them.

Button Toolbar

To group button groups, we can use the ButtonToolbar component.

For instance, we can write:

We put our ButtonGroups inside the ButtonToolbar .

There wont be any spaces between the button groups.

Sizing

We can change the sizing of the button group.

To do that, we use the size prop.

For example, we can write:

We set size to lg to make the buttons large.

And we set size to sm to make the buttons small.

Omitting the size prop means we set the size to the default.

Nesting

We can nest ButtonDropdown s in ButtonGroup s.

For example, we can write:

We have the ButtonDropdown in our ButtonGroup .

isOpen is the dropdown open state.

toggle lets us toggle the dropdown open state.

Vertical Variation

We can add the vertical prop to make the button group vertical.

For example, we can write:

to make the button group vertical.

Image for post
Image for post
Photo by Taylor Kiser on Unsplash

Conclusion

We can add button groups to group buttons together.

Also, we can add button toolbars to add button groups.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store