Badge
Badges are small status descriptors for UI elements. A badge consists of a small circle, typically containing a number or other short set of characters, that appears in proximity to another object.
Usage
Import
npm i @finastra/badge
import '@finastra/badge';
...
<fds-badge value="123">
<span> Success </span>
</fds-badge>API
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
color |
color |
"primary"|"secondary"|"success"|"error"|"white"|"outlined" |
"outlined" | Badge color |
position |
position |
"topLeft"|"topRight"|"center" |
"center" | Badge position |
type |
type |
""|"indicator" |
"" | Badge type |
value |
value |
string |
"" | Badge value |
Slots
| Name | Description |
|---|---|
default |
Content of the badge |