No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Badge

The <Badge> component is a numerical indicator of associated items. For a simple colored circle without a number inside, pass in the "empty" prop. If empty, it will not display any text within the badge.

Component Example

2

Component Example Source

<Badge text="2" />

Badge Props

NameDescriptionDefault
text
string
''
context
One of: inverse, success, success-inverse, info, info-inverse, warning, warning-inverse, danger, danger-inverse
string
-
empty
bool
false
className
string
-
style
object
-