@illa-design/badge NPM

Badge

The badge component usually appears in the upper right corner of avatar or text to provide important information alert.

Installation

yarn add @illa-design/badge

Import Component

import { Badge } from "@illa-design/badge"

API

Badge Basic Properties

Props	Desc	Type	Default
count	The number show on the badge	number\| ReactNode	0
text	The displayed text	string \| string[]	-
dot	If true, the badge is a red dot	boolean	-
dotStyle	The style of the dot	object	-
maxCount	Max count of the number displayed	number	9
offset	Offset the badge	number,number	-
status	The status of the badge	"default" \| "processing" \| "success" \| "warning" \| "error"	-
colorScheme	The color of the dot	"white" \| "blackAlpha" \| "gray" \| "grayBlue" \| "red" \| "orange" \| "yellow" \| "green" \| "blue" \| "cyan" \| "purple"	-

Example

Basic usage

<Badge />

Set Badge's status and text

<Badge status="success" text={"success"}></Badge>

Set max count

<Badge count={99} maxCount={50}></Badge>

Set red dot style

<Badge
  count={22}
  dotStyle={{ marginLeft: 3 }}
></Badge>

Set badge render with offset

<Badge count={22} offset={[1, 2]}></Badge>

badge react component

@illa-design/theme @illa-design/icon @illa-design/system

@infinitebrahmanuniverse/nolb-_il @everything-registry/sub-chunk-458 @illa-design/react

5 months ago

5 months ago

10 months ago

10 months ago

11 months ago

9 months ago

8 months ago

1 year ago

1 year ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago