@startupjs-ui/badge 0.1.13 → 0.1.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/README.mdx +11 -8
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.1.19](https://github.com/startupjs/startupjs-ui/compare/v0.1.18...v0.1.19) (2026-03-17)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **docs:** don't load all icons to keep bundle small ([#17](https://github.com/startupjs/startupjs-ui/issues/17)) ([d7eb70b](https://github.com/startupjs/startupjs-ui/commit/d7eb70bc11f5b15923f2e43b7ef1f86ea066494e))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [0.1.16](https://github.com/startupjs/startupjs-ui/compare/v0.1.15...v0.1.16) (2026-02-10)
|
|
18
|
+
|
|
19
|
+
**Note:** Version bump only for package @startupjs-ui/badge
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
## [0.1.13](https://github.com/startupjs/startupjs-ui/compare/v0.1.12...v0.1.13) (2026-02-03)
|
|
7
26
|
|
|
8
27
|
**Note:** Version bump only for package @startupjs-ui/badge
|
package/README.mdx
CHANGED
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
import Badge, { _PropsJsonSchema as BadgePropsJsonSchema } from './index'
|
|
2
2
|
import Div from '@startupjs-ui/div'
|
|
3
3
|
import Icon from '@startupjs-ui/icon'
|
|
4
|
-
import { faThumbsUp
|
|
4
|
+
import { faThumbsUp } from '@fortawesome/free-solid-svg-icons/faThumbsUp'
|
|
5
|
+
import { faEnvelope } from '@fortawesome/free-solid-svg-icons/faEnvelope'
|
|
5
6
|
import { Sandbox } from '@startupjs-ui/docs'
|
|
6
7
|
|
|
7
8
|
# Badge
|
|
8
9
|
|
|
9
|
-
|
|
10
|
+
Badges are small status descriptors that attach to UI elements, such as icons or buttons. They are commonly used to display counts (like unread messages) or to indicate a change in state.
|
|
11
|
+
|
|
12
|
+
The component supports a `style` prop for custom styles on the root wrapper and a `badgeStyle` prop for custom styles on the badge indicator itself.
|
|
10
13
|
|
|
11
14
|
```js
|
|
12
15
|
import { Badge } from 'startupjs-ui'
|
|
@@ -24,7 +27,7 @@ return (
|
|
|
24
27
|
|
|
25
28
|
## Sizes
|
|
26
29
|
|
|
27
|
-
Badges come in three different sizes: `s`, `m`, and `l`. The
|
|
30
|
+
Badges come in three different sizes: `'s'`, `'m'`, and `'l'`. The default size is `'m'`.
|
|
28
31
|
|
|
29
32
|
```jsx example
|
|
30
33
|
return (
|
|
@@ -44,7 +47,7 @@ return (
|
|
|
44
47
|
|
|
45
48
|
## Variants
|
|
46
49
|
|
|
47
|
-
There are two
|
|
50
|
+
There are two variants: `'default'` and `'dot'`. The `'default'` variant displays a label and is used by default. The `'dot'` variant renders the badge as a small dot, which is useful for indicating that something has changed without showing a specific count. When `variant='dot'` is set, the `size` prop is ignored.
|
|
48
51
|
|
|
49
52
|
```jsx example
|
|
50
53
|
return (
|
|
@@ -61,7 +64,7 @@ return (
|
|
|
61
64
|
|
|
62
65
|
## Colors
|
|
63
66
|
|
|
64
|
-
|
|
67
|
+
The default color is `'primary'`. You can change it by passing a color name from the theme configuration to the `color` prop. See the Sandbox section at the bottom of the page for all available values.
|
|
65
68
|
|
|
66
69
|
```jsx example
|
|
67
70
|
return (
|
|
@@ -73,7 +76,7 @@ return (
|
|
|
73
76
|
|
|
74
77
|
## Position
|
|
75
78
|
|
|
76
|
-
|
|
79
|
+
The badge can be positioned at the `'top'` or `'bottom'` of its child element. The default position is `'top'`.
|
|
77
80
|
|
|
78
81
|
```jsx example
|
|
79
82
|
return (
|
|
@@ -90,7 +93,7 @@ return (
|
|
|
90
93
|
|
|
91
94
|
## Icons
|
|
92
95
|
|
|
93
|
-
|
|
96
|
+
An icon can be displayed inside the badge using the `icon` prop.
|
|
94
97
|
|
|
95
98
|
```jsx example
|
|
96
99
|
return (
|
|
@@ -102,7 +105,7 @@ return (
|
|
|
102
105
|
|
|
103
106
|
## Counter
|
|
104
107
|
|
|
105
|
-
|
|
108
|
+
When the `label` prop is a number, you can use the `max` prop to cap the displayed value. If `label` exceeds `max`, the badge shows the max value followed by a `+` sign.
|
|
106
109
|
|
|
107
110
|
```jsx example
|
|
108
111
|
return (
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@startupjs-ui/badge",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.19",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -8,15 +8,15 @@
|
|
|
8
8
|
"types": "index.d.ts",
|
|
9
9
|
"type": "module",
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@startupjs-ui/core": "^0.1.
|
|
12
|
-
"@startupjs-ui/div": "^0.1.
|
|
13
|
-
"@startupjs-ui/icon": "^0.1.
|
|
14
|
-
"@startupjs-ui/span": "^0.1.
|
|
11
|
+
"@startupjs-ui/core": "^0.1.19",
|
|
12
|
+
"@startupjs-ui/div": "^0.1.19",
|
|
13
|
+
"@startupjs-ui/icon": "^0.1.19",
|
|
14
|
+
"@startupjs-ui/span": "^0.1.19"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"react": "*",
|
|
18
18
|
"react-native": "*",
|
|
19
19
|
"startupjs": "*"
|
|
20
20
|
},
|
|
21
|
-
"gitHead": "
|
|
21
|
+
"gitHead": "bfcca786dc363f42a09b6eef4feb7ca8139302fc"
|
|
22
22
|
}
|