ak-badge

Badge

Badges are visual indicators for numeric values such as tallies and scores. They're commonly used before and after the label of the thing they're quantifying. They must be used singly after a single item name, and have only numbers.

• Use lozenges for statuses.
• Use labels to call out tags and high-visibility attributes.
• Use a tooltip if you want to indicate units.

Try it out

Interact with a live demo of the ak-badge component.

Installation

npm install ak-badge

Using the component

HTML

The ak-badge package exports the Badge React component.

Import the component in your React app as follows:

import Badge from 'ak-badge';
ReactDOM.render(<Badge />, container);

AkBadge

Kind: global class

• Properties

  • akBadge.value : number
  • akBadge.max : number
  • akBadge.appearance : string
  • akBadge.onValueUpdated : function

new AkBadge()

Return React class reference for the Badge component.

JS Example

import AkBadge from 'ak-badge';
ReactDOM.render(<AkBadge />, container);

akBadge.value : number

The value displayed within the badge.

Kind: instance property of AkBadge
Default: 0

akBadge.max : number

The max value to display. If value is 100, and max is 50, "50+" will be displayed

Kind: instance property of AkBadge
Default: 99

akBadge.appearance : string

Affects the visual style of the badge. Allowed values are: 'default', 'primary', 'important', 'added', 'removed'.

Kind: instance property of AkBadge
Default: "default"

akBadge.onValueUpdated : function

Handler function to be called when the 'updated' prop is changed.

Kind: instance property of AkBadge

Support and feedback

We're here to help!

Let us know what you think of our components and docs, your feedback is really important for us.

Community support

Ask a question in our forum.

Check if someone has already asked the same question before.

Create a support ticket

Are you in trouble? Let us know!