A small UI that can be used standalone as a tag or label, or attached to other UI components as a notification or count

![badge](https://user-images.githubusercontent.com/10867086/38428861-1c09ba44-39bd-11e8-9470-a24a7321d4d7.png)

# Usage

## Usage as tag

A Badge can be used as a tag, to describe and categorize items:

<img width="289" alt="screen shot 2018-04-06 at 16 14 41" src="https://user-images.githubusercontent.com/10867086/38429041-9749d6ee-39bd-11e8-8c26-933b4cef69b8.png">

Using a Badge is an hint for the user that there might be different categories other than the ones displayed at the current time.

## Usage as a counter

A Badge can be used as a counter, to show e.g. the total number of items a search has matched:

<img width="59" alt="screen shot 2018-04-06 at 16 25 57" src="https://user-images.githubusercontent.com/10867086/38429155-e8bd38ea-39bd-11e8-917f-64e4a661b7be.jpg">

When attached to another UI element (typically an icon or a menu item), a Badge can be used as a notification counter, to show e.g. the number of unread messages in an inbox:

<img width="122" alt="screen shot 2018-04-06 at 16 14 50" src="https://user-images.githubusercontent.com/10867086/38429265-3838387a-39be-11e8-8378-cfa93bde9e3f.jpg">

In this case, the counter Badge is typically only shown when the number is greater than 0, to draw user's attention.

