web
mobile
Edit these docs Rate these docs

React Mobile Button Group

React Mobile Button Group - Bootstrap 4 & Material Design

Group a series of buttons together on a single line with the button group.

Take a look at the following button groups examples:


Basic examples

Wrap a series of buttons within the MDBButtonGroup component.

Android
Android button-groups
iOS
iOS button-groups

        <script>

        import React, { Component } from "react";
        import {View, ScrollView } from "react-native";
        import {MDBButtonGroup} from 'mdbreact-mobile';

        export default class ButtonsPage extends Component {

          render() {
            return (
              <ScrollView>
                <View>
                  <MDBButtonGroup buttons={[
                    {
                      text: "MDB RN",
                      color: "danger",
                      size: "",
                      disabled: false
                    },
                    {
                      text: "MDB RN",
                      color: "danger",
                      size: "",
                      disabled: false
                    },
                    {
                      text: "MDB RN",
                      color: "danger",
                      size: "",
                      disabled: false
                    }
                ]}></MDBButtonGroup>
               </View>
              </ScrollView>
            );
          }
        }

        </script>
      

Vertical Colors

Android
Android button-groups
iOS
iOS button-groups

        <script>

        import React, { Component } from "react";
        import {View, ScrollView } from "react-native";
        import {MDBButtonGroup} from 'mdbreact-mobile';

        export default class ButtonsPage extends Component {

          render() {
            return (
              <ScrollView>
                <View>
                  <MDBButtonGroup
                  direction="column"
                  buttons={[
                    {
                      text: "MDB RN",
                      color: "danger",
                      size: "",
                      disabled: false
                    },
                    {
                      text: "MDB RN",
                      color: "warning",
                      size: "",
                      disabled: false
                    },
                    {
                      text: "MDB RN",
                      color: "success",
                      size: "",
                      disabled: false
                    }
                ]}></MDBButtonGroup>
               </View>
              </ScrollView>
            );
          }
        }

        </script>
      

Vertical centred

Android
Android button-groups
iOS
iOS button-groups

        <script>

        import React, { Component } from "react";
        import {View, ScrollView } from "react-native";
        import { MDBButtonGroup } from 'mdbreact-mobile';

        export default class ButtonsPage extends Component {

          render() {
            return (
              <ScrollView>
                <View>
                  <MDBButtonGroup
                    direction="column"
                    alignSelf="center"
                    justify="center"
                    alignItem="center"
                    buttons={[
                      {
                        text: "MDB RN",
                        color: "info",
                        size: "",
                        disabled: false
                      },
                      {
                        text: "MDB RN",
                        color: "info",
                        size: "",
                        disabled: false
                      },
                      {
                        text: "MDB RN",
                        color: "info",
                        size: "",
                        disabled: false
                      }
                    ]}
                ></MDBButtonGroup>
               </View>
              </ScrollView>
            );
          }
        }

        </script>
      

Vertical right aligned

Android
Android button-groups
iOS
iOS button-groups

        <script>

        import React, { Component } from "react";
        import {View, ScrollView } from "react-native";
        import { MDBButtonGroup } from 'mdbreact-mobile';

        export default class ButtonsPage extends Component {

          render() {
            return (
              <ScrollView>
                <View>
                  <MDBButtonGroup
                  direction="column"
                  alignSelf="center"
                  justify="flex-end"
                  alignItem="flex-end"
                  buttons={[
                    {
                      text: "MDB RN",
                      color: "info",
                      size: "",
                      disabled: false
                    },
                    {
                      text: "MDB RN",
                      color: "info",
                      size: "",
                      disabled: false
                    },
                    {
                      text: "MDB RN",
                      color: "info",
                      size: "",
                      disabled: false
                    }
                  ]}
                ></MDBButtonGroup>
               </View>
              </ScrollView>
            );
          }
        }

        </script>
      

Disabled

Android
Android button-groups
iOS
iOS button-groups

        <script>

        import React, { Component } from "react";
        import {View, ScrollView } from "react-native";
        import { MDBButtonGroup } from 'mdbreact-mobile';

        export default class ButtonsPage extends Component {

          render() {
            return (
              <ScrollView>
                <View>
                  <MDBButtonGroup
                  direction="row"
                  alignSelf="center"
                  justify="center"
                  alignItem="center"
                  buttons={[
                    {
                      text: "MDB RN",
                      color: "info",
                      size: "",
                      disabled: true
                    },
                    {
                      text: "MDB RN",
                      color: "info",
                      size: "",
                      disabled: true
                    },
                    {
                      text: "MDB RN",
                      color: "info",
                      size: "",
                      disabled: true
                    }
                  ]}
                ></MDBButtonGroup>
               </View>
              </ScrollView>
            );
          }
        }

        </script>
      

Sizing

Android
Android button-groups
iOS
iOS button-groups

        <script>

        import React, { Component } from "react";
        import {View, ScrollView } from "react-native";
        import { MDBButtonGroup } from 'mdbreact-mobile';

        export default class ButtonsPage extends Component {

          render() {
            return (
              <ScrollView>
                <View>
                  <MDBButtonGroup
                  direction="row"
                  alignSelf="center"
                  justify="center"
                  alignItem="center"
                  buttons={[
                    {
                      text: "MDB RN",
                      color: "info",
                      size: "sm",
                      disabled: false
                    },
                    {
                      text: "MDB RN",
                      color: "info",
                      size: "",
                      disabled: false
                    },
                    {
                      text: "MDB RN",
                      color: "info",
                      size: "lg",
                      disabled: false
                    }
                  ]}
                ></MDBButtonGroup>
               </View>
              </ScrollView>
            );
          }
        }

        </script>
      

Custom colors

Android
Android button-groups
iOS
iOS button-groups

        <script>

        import React, { Component } from "react";
        import {View, ScrollView } from "react-native";
        import { MDBButtonGroup } from 'mdbreact-mobile';

        export default class ButtonsPage extends Component {

          render() {
            return (
              <ScrollView>
                <View>
                  <MDBButtonGroup
                    direction="row"
                    alignSelf="center"
                    justify="center"
                    alignItem="center"
                    buttons={[
                      {
                        text: "MDB RN",
                        color: "rgb(255,111,33)",
                        size: "",
                        disabled: false
                      },
                      {
                        text: "MDB RN",
                        color: "rgb(135,111,84)",
                        size: "",
                        disabled: false
                      },
                      {
                        text: "MDB RN",
                        color: "rgb(85,131,133)",
                        size: "",
                        disabled: false
                      }
                    ]}
                  ></MDBButtonGroup>
               </View>
              </ScrollView>
            );
          }
        }

        </script>
      

Gradient

Android
Android button-groups
iOS
iOS button-groups

        <script>

        import React, { Component } from "react";
        import {View, ScrollView } from "react-native";
        import { MDBButtonGroup } from 'mdbreact-mobile';

        export default class ButtonsPage extends Component {

          render() {
            return (
              <ScrollView>
                <View>
                  <MDBButtonGroup
                    direction="row"
                    alignSelf="center"
                    justify="center"
                    alignItem="center"
                    buttons={[
                      {
                        text: "MDB RN",
                        gradient: "peach"
                      },
                      {
                        text: "MDB RN",
                        gradient: "blue"
                      },
                      {
                        text: "MDB RN",
                        gradient: "purple"
                      }
                    ]}
                  ></MDBButtonGroup>
               </View>
              </ScrollView>
            );
          }
        }
        </script>
      
Edit these docs Rate these docs

Button Group - API

In this section you will find advanced information about the Button Group component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use in working with it.


Import statement


                import { MDBButtonGroup } from 'mdbreact-mobile'
            

API Reference: Properties

Name Type Default Description Example
direction string row Direction of butotns <MDBButtonGroup direction="Text" />
alignSelf string center The align-self CSS property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis. <MDBButtonGroup alignSelf="center" />
alignItem string '' The CSS align-items property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. <MDBButtonGroup alignSelf="center" />
justify string '' The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. <MDBButtonGroup alignSelf="center" />
buttons Object [ { text: "MDB RN", color: "primary", size: "", disabled: false, gradient: null }, { text: "MDB RN", color: "primary", size: "", disabled: false, gradient: null }, { text: "MDB RN", color: "primary", size: "", disabled: false, gradient: null } ] Basic implementation of Button Gropu with text, color, size, disabled, gradient. <MDBButtonGroup buttons={[]}/>

API Reference: Methods

Name Parameters Description Example
onPressed ()=>{} Click on modal pass this prop function. <MDBModal onPressed="()=>" />