STYLED MDL

Badges

Small status descriptors for UI elements.

Badges with icons

account_box
4
account_box
done
/*--- Number over icon ---*/
<Badge overlap text="4">
  <Icon lg name="account_box" />
</Badge>

/*--- Icon over icon ---*/
<Badge overlap text={<Icon sm name="done" />}>
  <Icon lg name="account_box" />
</Badge>

Badges with text

Inbox
7
Walk the dog
done
/*--- Number over text ---*/
<Badge text="7">Inbox</Badge>

/*--- Icon over text ---*/
<Badge text={<Icon sm name="done" />}>Walk the dog</Badge>

Badges with buttons

7
/*--- Text over button ---*/
<Badge forButton text="7"><Button raised>Inbox</Button></Badge>

Usage

<Badge>

PropTypeDefaultDescription
textnodeundefinedThis is what will render inside the badge, can be any valid react node, but it will look strange if this is more than a few characters or a single icon
forButtonbooleanfalseSet this to true if you are using the badge with a button
overlapbooleanfalseSlighly offsets the badge to the right. Set this to true if you are using the badge on top of an icon