web
mobile
Edit these docs Rate these docs

React Mobile Badges

React Mobile Badges - Bootstrap 4 & Material Design

React Mobile tags are components which separate content placed in the same wrapper, but in the separate pane. Only one pane can be displayed at the time.

Their main goal is to provide your visitors with an intuitive way of getting what they want.


Contextual variations

Add any of the below mentioned props to change the appearance of a badge.

Android
Android badges
iOS
Ios badges

        <script>
          import React, { Component } from "react";
          import { Text, View, Button } from "react-native";
          import {MDBBadge} from "mdbreact-mobile";

          export default class BadgesPage extends Component {

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

        </script>
      

Pills

Add pill props to have a rounded badges.

Android
Android badges
iOS
iOS badges

        <script>
          import React, { Component } from "react";
          import { Text, View, Button } from "react-native";
          import {MDBBadge} from "mdbreact-mobile";

          export default class BadgesPage extends Component {

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

        </script>
      

With Icons

Android
Android badges
iOS
iOS badges

        <script>
          import React, { Component } from "react";
          import { Text, View, Button } from "react-native";
          import { MDBBadge, MDBIcon} from "mdbreact-mobile";

          export default class BadgesPage extends Component {

            render() {
              return (
                <View>
                  <MDBBadge color="primary" icon={<Icon icon="home" size={16} color="#fff"></Icon>}></MDBBadge>
                  <MDBBadge color="danger" icon={<Icon icon="home" size={16} color="#fff"></Icon>}></MDBBadge>
                  <MDBBadge color="success" icon={<Icon icon="home" size={16} color="#fff"></Icon>}></MDBBadge>
                  <MDBBadge color="info" icon={<Icon icon="home" size={16} color="#fff"></Icon>}></MDBBadge>
                  <MDBBadge color="secondary" icon={<Icon icon="home" size={16} color="#fff"></Icon>}></MDBBadge>
                  <MDBBadge color="warning" icon={<Icon icon="home" size={16} color="#fff"></Icon>}></MDBBadge>
                  <MDBBadge color="dark" icon={<Icon icon="home" size={16} color="#fff"></Icon>}></MDBBadge>
                </View>
              );
            }
          }

        </script>
      
Edit these docs Rate these docs

Badges - API

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

API Reference: Properties

Name Type Default Description Example
title string '' Badge default text <MDBBadge title="Text" />
color string primary Set colors to badge <MDBBadge color="primary" />
pill boolean false Set pill style to badge <MDBBadge pill />
icon object {} Set Icon component to prop to show icon in bdage <MDBBadge icon={<MDBIcon icon="home" size={16} color="#fff">} />