web
mobile

React Mobile Buttons

React Mobile Buttons - Bootstrap 4 & Material Design

Use React Mobile Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.


Basic examples

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

Android
Android buttons
iOS
iOS buttons

        <script>

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

        export default class ButtonsPage extends Component {

          render() {
            return (
              <ScrollView>
                <View>
                  <MDBButton title="Primary" color="primary"></MDBButton>
                  <MDBButton title="Danger" color="danger"></MDBButton>
                  <MDBButton title="Success" color="success"></MDBButton>
                  <MDBButton title="Info" color="info"></MDBButton>
                  <MDBButton title="Secondary" color="secondary"></MDBButton>
                  <MDBButton title="Warning" color="warning"></MDBButton>
                  <MDBButton title="Dark" color="dark"></MDBButton>
               </View>
              </ScrollView>
            );
          }
        }

        </script>
      

Gradient examples

Android
Android buttons
iOS
iOS buttons

        <script>

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

        export default class ButtonsPage extends Component {

          render() {
            return (
              <ScrollView>
                <View>
                    <MDBButton title="Peach" gradient="peach"></MDBButton>
                    <MDBButton title="Blue" gradient="blue"></MDBButton>
                    <MDBButton title="Aqua" gradient="aqua"></MDBButton>
                    <MDBButton title="Purple" gradient="purple"></MDBButton>
               </View>
              </ScrollView>
            );
          }
        }

        </script>
        

Outline examples

Android
Android buttons
iOS
iOS buttons

        <script>

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

        export default class ButtonsPage extends Component {

          render() {
            return (
              <ScrollView>
                <View>
                  <MDBButton title="Primary" color="primary" outline></MDBButton>
                  <MDBButton title="Danger" color="danger" outline></MDBButton>
                  <MDBButton title="Success" color="success" outline></MDBButton>
                  <MDBButton title="Info" color="info" outline></MDBButton>
                  <MDBButton title="Secondary" color="secondary" outline></MDBButton>
                  <MDBButton title="Warning" color="warning" outline></MDBButton>
                  <MDBButton title="Dark" color="dark" outline></MDBButton>
               </View>
              </ScrollView>
            );
          }
        }

        </script>
        

Sizes examples

Android
Android buttons
iOS
iOS buttons

        <script>

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

        export default class ButtonsPage extends Component {

          render() {
            return (
              <ScrollView>
                <View>
                  <MDBButton title="Primary" color="primary" size="lg"></MDBButton>
                  <MDBButton title="Danger" color="danger" ></MDBButton>
                  <MDBButton title="Success" color="success" size="sm"></MDBButton>
               </View>
              </ScrollView>
            );
          }
        }

        </script>
        

Custom examples

React Mobile Buttons have a special props what can you customize colors in your button which colors your like.

Android
Android buttons
iOS
iOS buttons

        <script>

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

        export default class ButtonsPage extends Component {

          render() {
            return (
              <ScrollView>
                <View>
                  <MDBButton title="Custom1" color="red"></MDBButton>
                  <MDBButton title="Custom2" color="green"></MDBButton>
                  <MDBButton title="Custom3" color="rgb(255,1,55)"></MDBButton>
                  <MDBButton title="Custom1" gradient="blue, red"></MDBButton>
                  <MDBButton title="Custom2" gradient="yellow, green"></MDBButton>
                  <MDBButton title="Custom3" gradient="pink, purple"></MDBButton>
                  <MDBButton title="Custom4" gradient={["lightblue", "green"]}></MDBButton>
               </View>
              </ScrollView>
            );
          }
        }

        </script>
        

Buttons - API

In this section you will find advanced information about the Buttons al 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 { MDBButton } from 'mdbreact-mobile'
      

API Reference: Properties

Name Type Default Description Example
title string '' Button default text <MDBButton title="Text" />
color string primary Color API you can use color from our pallete or set color what you like in HEX, rgb/a or HSL. <MDBButton color="rgb(0,0,0)" />
textColor string #fff Color of text in button. <MDBButton textColor="#fff" />
disabled boolean false Set button to disable. <MDBButton disabled />
outline boolean false Set outline design to button. <MDBButton outline />
gradient string or array null Set gradient colors to button. You can set default MDB gradient to button like : peach, blue, purple, aqua or you can mix your own colors ( min. 2 colors). If you would like to use HEX, rgb/a you have to use array insted quotes. <MDBButton gradient="blue" /> <MDBButton gradient="blue, red" /> <MDBButton gradient={['blue','red']} /> <MDBButton gradient={['rgb(0,255,11)','yellow']} /> <MDBButton gradient={['rgb(255,2,55), pink']} /> <MDBButton gradient={['hsl(196,73%,55%), blue']} />

API Reference: Methods

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