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 |