Badge
Badges are used to inform about status or show a value in proximity to notifications or any action that has been taken.
There are 2 variants of Badges:
- Strong: has a value
- Light: without any value
Use a strong Badge to denote quantity, use a light Badge to seek mild attention. Both types offer different support variants namely danger, warning, info and success which are available as props.
Badge renders danger variation by default for both strong and light variants.
Usage
import Badge from "@asphalt-react/badge"
// Strong badge
<Badge value={29} />
// Light badge
<Badge />Props
value
Value to display in Badge.
| type | required | default |
|---|---|---|
| union | false | null |
danger
Applies danger styles
| type | required | default |
|---|---|---|
| bool | false | false |
warning
Applies warning styles
| type | required | default |
|---|---|---|
| bool | false | false |
info
Applies info styles
| type | required | default |
|---|---|---|
| bool | false | false |
success
Applies success styles
| type | required | default |
|---|---|---|
| bool | false | false |