Labels

React Bootstrap 5 Labels component

Responsive React Labels built with Bootstrap 5. Badge Labels are for counters, categories & tags. Floating labels refer to forms, and slider labels to the range.

Badge Labels

The valid term for Labels in Bootstrap 5 is now Badges. Make sure to jump straight to the Badges documentation if you are looking for more examples & customization options for the component from the example below.

Example heading New

        
            
          import React from 'react';
          import { MDBBadge } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <div>
                <h2>
                  Example heading
                  <MDBBadge className='ms-2'>NEW</MDBBadge>
                </h2>
              </div>
            );
          }

Floating Labels for Inputs

The term Label is now mainly used for the label element describing the input fields in form. Make sure to jump straight to the Input fields documentation if you are looking for more examples & customization options for the component from the example below. 

        
            
        import React from 'react';
        import { MDBInput } from 'mdb-react-ui-kit';
        
        export default function App() {
          return (
            <MDBInput label='Example label' id='form1' type='text' />
          );
        }

Range slider with labels

Another input with a different type of label is the Range Slider. Make sure to jump straight to the Range slider documentation if you are looking for more examples & customization options for the component from the example below. 

        
            
        import React from 'react';
        import { MDBRange } from 'mdb-react-ui-kit';
        
        export default function App() {
          return (
            <MDBRange
              defaultValue={50}
              id='customRange'
              label='Example range'
            />
          );
        }