Skip to content
Branch: master
Find file History
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
Badge.App.js ESLint fixes (#189) Jul 10, 2018
Badge.Identity.js
Badge.Info.js
Badge.Notification.js
Badge.js
README.md
index.js Remove circular dependencies (#298) Jan 27, 2019

README.md

Badge

A Badge component.

Usage

import { Badge } from '@aragon/ui'

const App = () => (
  <Badge>Badge</Badge>
)

Properties

shape

  • Type: String
  • Values: round (default), disc, smalldisc, compact

foreground

  • Type: String

The text color.

background

  • Type: String (color)

The background color.

Attached Components

These components extend Badge by adding defaults for the shape, foreground and background props.

<Badge.Notification>

Use this for notifications (e.g. number of notification messages).

Additional props:

  • small: use the smalldisc shape rather than disc.
  • count: Number, any value higher than 99 will be displayed as “99”. Overrides children when set.

<Badge.Identity>

Use this for Aragon identities or account addresses.

Additional props:

  • small: use the smalldisc shape rather than disc.
  • count: Number, any value higher than 99 will be displayed as “99”. Overrides children when set.

<Badge.App>

Use this for app instances.

<Badge.Info>

Use this for informative counts or characters (e.g. “2”, “?”, “99”).

You can’t perform that action at this time.