Badge

Demo

{/* Number badge on icon */}
<Badge text="1" overlap>
    <Icon name="account_box" />
</Badge>

{/* Icon badge on icon */}
<Badge text="" overlap>
    <Icon name="account_box" />
</Badge>
{/* Number badge on text */}
<Badge text="4">Inbox</Badge>

{/* Icon badge without background on text */}
<Badge text="" noBackground>Mood</Badge>

Configuration

Prop Effect Remarks
text Assign string value to badge Required
overlap Makes the badge overlaps its container Optional
noBackground Removes the background of the badge Optional