badge

v4.9.10

v4.5.2

v3.9.2

STATUS

Passing

DOWNLOADS

4,007

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

4 years ago

SIZE

25 KB

Badge generates a small badge to the top-right of its child(ren).

Badge

React

UI Components

2 contributors

Install badge as a package?

Copied

npm i @bit/mui-org.material-ui.badge

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

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';

modifieddraft

The anchor of the badge.

Wrapped shape the badge should overlap.

The content rendered within the badge.

The badge will be added relative to this node.

The color of the component. It supports those theme colors that make sense for this component.

If true, the badge will be invisible.

Max count to show.

Controls whether the badge is hidden when badgeContent is zero.

The variant to use.

Demos:

API:

Badge API

Properties

Name	Type	Description
anchorOrigin	`{"horizontal":"'left' \| 'right'","vertical":"'bottom' \| 'top'"}`	The anchor of the badge.
badgeContent	`node`	The content rendered within the badge.
children	`node`	The badge will be added relative to this node.
classes	`object`	Override or extend the styles applied to the component. See CSS API below for more details.
className	`string`
color	`'default' \| 'error' \| 'primary' \| 'secondary'`	The color of the component. It supports those theme colors that make sense for this component.
component	`elementType`	The component used for the root node. Either a string to use a DOM element or a component.
invisible	`bool`	If `true`, the badge will be invisible.
max	`number`	Max count to show.
overlap	`'circle' \| 'rectangle'`	Wrapped shape the badge should overlap.
showZero	`bool`	Controls whether the badge is hidden when `badgeContent` is zero.
variant	`'dot' \| 'standard'`	The variant to use.