Badge
Badge generates a small badge to the top-right of its child(ren).
setup
Import the Badge component in a script tag.
Svelte Copy
import { Badge } from "@mgisolutions/design-system/svelte";
Basic usage
Basic usage Badge
Demonstrate
Basic usage
Svelte Copy
<Badge label="Basic usage" color="success" />
dot
Demonstrate
Svelte Copy
<Badge label="Basic usage" color="success" dot />
digit
Demonstrate
12
Svelte Copy
<Badge label="12" color="success" digit
digit square
Demonstrate
12
Svelte Copy
<Badge label="12" color="success" digitSquare />
floating
Demonstrate
45
Svelte Copy
<Badge label="45" color="success" floating digitSquare>
<Button>On Sale</Button>
</Badge>
Component Data
- props
| Name | Description | Type | Default |
|---|---|---|---|
| label | The string used to show the badge | string | label |
| floating | If set, then badge will show on the top right, it works properly when digit = true | boolean | false |
| dot | The mode of the badge. | Boolean | false |
| small | The size of the badge. | Boolean | true |
| digit | If set, then the badge have mode of digit (text white, background accent) and only shows values less than 1000, if larger it will show 999+ | Boolean | false |
| digitSquare | If set, then the badge have mode of digit square (text white, background accent, border-radius:4px ) and only shows values less than 1000, if larger it will show 999+ | Boolean | false |
| color | Color of border and text, it will be apply when digit or digitSquare = false | string | success |