Enzyme UI

# Badge

Badge can be used to add labeling or indication to other ui components.

# Simple badges

You can provide type prop with one of the theme color names to customize the colors of badge

A default badge A primary badge A secondary badge A success badge A info badge A warning badge A danger badge A light badge

<badge type="default">A default badge</badge>
<badge type="primary">A primary badge</badge>
<badge type="secondary">A secondary badge</badge>
<badge type="success">A success badge</badge>
<badge type="info">A info badge</badge>
<badge type="warning">A warning badge</badge>
<badge type="danger">A danger badge</badge>
<badge type="light">A light badge</badge>

# Pill badges

To make badge corners rounded add pill property to component

A default badge A primary badge A secondary badge A success badge A info badge A warning badge A danger badge A light badge

<badge pill type="default">A default badge</badge>
<badge pill type="primary">A primary badge</badge>
<badge pill type="secondary">A secondary badge</badge>
<badge pill type="success">A success badge</badge>
<badge pill type="info">A info badge</badge>
<badge pill type="warning">A warning badge</badge>
<badge pill type="danger">A danger badge</badge>
<badge pill type="light">A light badge</badge>

Use link property to pass a link for a badge. If link is provided badge will become a link (<a>).

A default badge A primary badge A secondary badge A success badge A info badge A warning badge A danger badge A light badge

<badge pill type="default" link="#">A default badge</badge>
<badge pill type="primary" link="#">A primary badge</badge>
<badge pill type="secondary" link="#">A secondary badge</badge>
<badge pill type="success" link="#">A success badge</badge>
<badge pill type="info" link="#">A info badge</badge>
<badge pill type="warning" link="#">A warning badge</badge>
<badge pill type="danger" link="#">A danger badge</badge>
<badge pill type="light" link="#">A light badge</badge>

# Inverse variation

Provide inverse prop to get different colors for badge

A default badge A primary badge A secondary badge A success badge A info badge A warning badge A danger badge A light badge

<badge inverse type="default" link="#">A default badge</badge>
<badge inverse type="primary" link="#">A primary badge</badge>
<badge inverse type="secondary" link="#">A secondary badge</badge>
<badge inverse type="success" link="#">A success badge</badge>
<badge inverse type="info" link="#">A info badge</badge>
<badge inverse type="warning" link="#">A warning badge</badge>
<badge inverse type="danger" link="#">A danger badge</badge>
<badge inverse type="light" link="#">A light badge</badge>

# Props

name default description required type
type primary One of available bootstrap button types: primary, secondary, default, success, info, warning, danger false String
link Url of link, if link is provided the badge element will be set to <a> false String
pill false If pill prop is provided and set to true then .badge-pill class will be applied false Boolean
inverse false If set to true .badge-inverse class will be added false Boolean

← Breadcrumb →