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 |