Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

badge

v1.10.0arrow_drop_down
v1.10.0
v1.9.0
v1.7.0
v1.6.1
v1.4.0
STATUS
Passing
DOWNLOADS
75
VISIBILITY
Public
PUBLISHED
8 months ago
SIZE
18 KB
Badges are labels which hold small amounts of information.
1 contributor
Install badge as a package?
Copied
npm i @bit/nexxtway.react-rainbow.badge
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right
badges border
import React from 'react';
import { Badge } from 'react-rainbow-components';

<div className="rainbow-p-vertical_large rainbow-align-content_center rainbow-flex_wrap">
    <Badge
        className="rainbow-m-around_medium"
        label="Lightest Badge"
        variant="lightest"
        title="the badge title"
    />

    <Badge
        className="rainbow-m-around_medium"
        label="Outline Badge"
        variant="outline-brand"
        title="the badge title"
    />
</div>
badges variant
import React from 'react';
import { Badge } from 'react-rainbow-components';

<div className="rainbow-p-vertical_large rainbow-align-content_center rainbow-flex_wrap">
    <Badge className="rainbow-m-around_medium" label="Default Badge" title="the badge title" />

    <Badge
        className="rainbow-m-around_medium"
        label="Darker Badge"
        variant="inverse"
        title="the badge title"
    />

    <Badge
        className="rainbow-m-around_medium"
        label="Brand Badge"
        variant="brand"
        title="the badge title"
    />
</div>
badges with icons
import React from 'react';
import { Badge } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faStar } from '@fortawesome/free-solid-svg-icons';

<div className="rainbow-p-vertical_large rainbow-align-content_center rainbow-flex_wrap">
    <Badge variant="inverse" title="the badge title" className="rainbow-m-around_medium">
        <FontAwesomeIcon icon={faStar} pull="left" size="lg" />
        112 005
    </Badge>
    <Badge variant="lightest" title="the badge title" className="rainbow-m-around_medium">
        <FontAwesomeIcon icon={faStar} pull="left" size="lg" />
        212 002
    </Badge>
    <Badge variant="lightest" title="the badge title" className="rainbow-m-around_medium">
        <FontAwesomeIcon icon={faStar} size="lg" />
    </Badge>
</div>
Properties
NameTypeDefault valueDescription
label
string | nodenull
children
nodenull
label
string | nodenull

The text to be displayed inside the badge.

title
stringundefined

Displays tooltip text when the mouse moves over the element.

children
nodenull

The content of the badge. Used to render icon or text elements inside the badge. Children takes precedence over label.

variant
'default' | 'inverse' | 'lightest' | 'outline-brand' | 'brand''default'

The variant changes the appearance of the badge. Accepted variants include default, inverse, lightest, brand and outline-brand. This value defaults to default.

className
stringundefined

A CSS class for the outer element, in addition to the component’s base classes.

style
objectundefined

An object with custom style applied to the outer element.