@xsolla/xui-badge 0.150.0 → 0.151.0
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/README.md +63 -167
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,35 +1,50 @@
|
|
|
1
1
|
# Badge
|
|
2
2
|
|
|
3
|
-
A cross-platform React badge component for
|
|
3
|
+
A cross-platform React badge component for counts, status dots, and small labels. Sizes `xs` and `sm` render as content-less dots; larger sizes accept text and icons.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
8
|
npm install @xsolla/xui-badge
|
|
9
|
-
# or
|
|
10
|
-
yarn add @xsolla/xui-badge
|
|
11
9
|
```
|
|
12
10
|
|
|
13
|
-
##
|
|
11
|
+
## Imports
|
|
14
12
|
|
|
15
|
-
|
|
13
|
+
```tsx
|
|
14
|
+
import { Badge } from '@xsolla/xui-badge';
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Quick start
|
|
16
18
|
|
|
17
19
|
```tsx
|
|
18
20
|
import * as React from 'react';
|
|
19
21
|
import { Badge } from '@xsolla/xui-badge';
|
|
20
22
|
|
|
21
|
-
export default function
|
|
22
|
-
return
|
|
23
|
-
<div style={{ display: 'flex', gap: 16 }}>
|
|
24
|
-
<Badge>5</Badge>
|
|
25
|
-
<Badge>99+</Badge>
|
|
26
|
-
<Badge>New</Badge>
|
|
27
|
-
</div>
|
|
28
|
-
);
|
|
23
|
+
export default function QuickStart() {
|
|
24
|
+
return <Badge tone="alert">5</Badge>;
|
|
29
25
|
}
|
|
30
26
|
```
|
|
31
27
|
|
|
32
|
-
|
|
28
|
+
## API Reference
|
|
29
|
+
|
|
30
|
+
### `<Badge>`
|
|
31
|
+
|
|
32
|
+
| Prop | Type | Default | Description |
|
|
33
|
+
| --- | --- | --- | --- |
|
|
34
|
+
| `children` | `ReactNode` | — | Badge content. Numeric values greater than `999` are clamped to `999+`. Ignored for `xs`/`sm` sizes. |
|
|
35
|
+
| `icon` | `ReactNode` | — | Icon rendered alongside content. Ignored for `xs`/`sm` sizes. |
|
|
36
|
+
| `size` | `"xl" \| "lg" \| "md" \| "sm" \| "xs"` | `"md"` | Badge size. `xs` and `sm` are dot-only. |
|
|
37
|
+
| `tone` | `"primary" \| "secondary" \| "brand" \| "brandExtra" \| "success" \| "warning" \| "alert" \| "neutral"` | `"alert"` | Colour tone. |
|
|
38
|
+
| `square` | `boolean` | `false` | Use a small square radius (4px) instead of pill/circle. |
|
|
39
|
+
| `showStroke` | `boolean` | `false` | Render a 1px border in the page background colour, useful when overlaid on imagery. |
|
|
40
|
+
| `aria-label` | `string` | — | Accessible label. |
|
|
41
|
+
| `aria-hidden` | `boolean` | auto | Defaults to `true` for content-less dots without `aria-label`. |
|
|
42
|
+
|
|
43
|
+
Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
|
|
44
|
+
|
|
45
|
+
## Examples
|
|
46
|
+
|
|
47
|
+
### Tones
|
|
33
48
|
|
|
34
49
|
```tsx
|
|
35
50
|
import * as React from 'react';
|
|
@@ -38,20 +53,20 @@ import { Badge } from '@xsolla/xui-badge';
|
|
|
38
53
|
export default function BadgeTones() {
|
|
39
54
|
return (
|
|
40
55
|
<div style={{ display: 'flex', gap: 16 }}>
|
|
41
|
-
<Badge tone="primary">
|
|
42
|
-
<Badge tone="secondary">
|
|
43
|
-
<Badge tone="brand">
|
|
44
|
-
<Badge tone="brandExtra">
|
|
45
|
-
<Badge tone="success">
|
|
46
|
-
<Badge tone="warning"
|
|
47
|
-
<Badge tone="alert">
|
|
48
|
-
<Badge tone="neutral">
|
|
56
|
+
<Badge tone="primary">P</Badge>
|
|
57
|
+
<Badge tone="secondary">S</Badge>
|
|
58
|
+
<Badge tone="brand">B</Badge>
|
|
59
|
+
<Badge tone="brandExtra">X</Badge>
|
|
60
|
+
<Badge tone="success">9</Badge>
|
|
61
|
+
<Badge tone="warning">!</Badge>
|
|
62
|
+
<Badge tone="alert">3</Badge>
|
|
63
|
+
<Badge tone="neutral">N</Badge>
|
|
49
64
|
</div>
|
|
50
65
|
);
|
|
51
66
|
}
|
|
52
67
|
```
|
|
53
68
|
|
|
54
|
-
###
|
|
69
|
+
### Sizes
|
|
55
70
|
|
|
56
71
|
```tsx
|
|
57
72
|
import * as React from 'react';
|
|
@@ -60,8 +75,8 @@ import { Badge } from '@xsolla/xui-badge';
|
|
|
60
75
|
export default function BadgeSizes() {
|
|
61
76
|
return (
|
|
62
77
|
<div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
|
|
63
|
-
<Badge size="xs" tone="alert" />
|
|
64
|
-
<Badge size="sm" tone="alert" />
|
|
78
|
+
<Badge size="xs" tone="alert" aria-label="Unread" />
|
|
79
|
+
<Badge size="sm" tone="alert" aria-label="Unread" />
|
|
65
80
|
<Badge size="md" tone="alert">5</Badge>
|
|
66
81
|
<Badge size="lg" tone="alert">5</Badge>
|
|
67
82
|
<Badge size="xl" tone="alert">5</Badge>
|
|
@@ -70,188 +85,69 @@ export default function BadgeSizes() {
|
|
|
70
85
|
}
|
|
71
86
|
```
|
|
72
87
|
|
|
73
|
-
###
|
|
88
|
+
### With icon
|
|
74
89
|
|
|
75
90
|
```tsx
|
|
76
91
|
import * as React from 'react';
|
|
77
92
|
import { Badge } from '@xsolla/xui-badge';
|
|
78
|
-
import {
|
|
79
|
-
import { Star } from '@xsolla/xui-icons-base';
|
|
93
|
+
import { Heart } from '@xsolla/xui-icons-base';
|
|
80
94
|
|
|
81
95
|
export default function BadgeWithIcon() {
|
|
82
96
|
return (
|
|
83
|
-
<
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
<Badge icon={<AlertCircle size={12} />} tone="alert">Error</Badge>
|
|
87
|
-
</div>
|
|
97
|
+
<Badge tone="warning" icon={<Heart />}>
|
|
98
|
+
Featured
|
|
99
|
+
</Badge>
|
|
88
100
|
);
|
|
89
101
|
}
|
|
90
102
|
```
|
|
91
103
|
|
|
92
|
-
###
|
|
104
|
+
### Square
|
|
93
105
|
|
|
94
106
|
```tsx
|
|
95
107
|
import * as React from 'react';
|
|
96
108
|
import { Badge } from '@xsolla/xui-badge';
|
|
97
109
|
|
|
98
|
-
export default function
|
|
99
|
-
return
|
|
100
|
-
<div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
|
|
101
|
-
<span>Online</span>
|
|
102
|
-
<Badge size="xs" tone="success" />
|
|
103
|
-
|
|
104
|
-
<span>Away</span>
|
|
105
|
-
<Badge size="xs" tone="warning" />
|
|
106
|
-
|
|
107
|
-
<span>Busy</span>
|
|
108
|
-
<Badge size="xs" tone="alert" />
|
|
109
|
-
|
|
110
|
-
<span>Offline</span>
|
|
111
|
-
<Badge size="xs" tone="neutral" />
|
|
112
|
-
</div>
|
|
113
|
-
);
|
|
110
|
+
export default function SquareBadge() {
|
|
111
|
+
return <Badge tone="brand" square>NEW</Badge>;
|
|
114
112
|
}
|
|
115
113
|
```
|
|
116
114
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
Import the component and use it directly:
|
|
120
|
-
|
|
121
|
-
```jsx
|
|
122
|
-
import { Badge } from '@xsolla/xui-badge';
|
|
123
|
-
|
|
124
|
-
<Badge
|
|
125
|
-
size="md" // Size variant (xs/s are dots only)
|
|
126
|
-
tone="alert" // Color tone
|
|
127
|
-
icon={<Icon />} // Optional icon
|
|
128
|
-
showStroke={false} // Show border
|
|
129
|
-
>
|
|
130
|
-
Content
|
|
131
|
-
</Badge>
|
|
132
|
-
```
|
|
133
|
-
|
|
134
|
-
## Examples
|
|
135
|
-
|
|
136
|
-
### Notification Count
|
|
115
|
+
### Notification count
|
|
137
116
|
|
|
138
117
|
```tsx
|
|
139
118
|
import * as React from 'react';
|
|
140
119
|
import { Badge } from '@xsolla/xui-badge';
|
|
141
|
-
import { Bell } from '@xsolla/xui-icons';
|
|
142
|
-
|
|
143
|
-
export default function NotificationBadge() {
|
|
144
|
-
const count = 12;
|
|
145
120
|
|
|
121
|
+
export default function NotificationCount() {
|
|
122
|
+
const [count, setCount] = React.useState(12);
|
|
146
123
|
return (
|
|
147
|
-
<
|
|
148
|
-
|
|
149
|
-
<
|
|
150
|
-
<Badge tone="alert"
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
</div>
|
|
154
|
-
</div>
|
|
124
|
+
<button onClick={() => setCount((c) => c + 1)} style={{ position: 'relative' }}>
|
|
125
|
+
Inbox
|
|
126
|
+
<span style={{ position: 'absolute', top: -8, right: -8 }}>
|
|
127
|
+
<Badge tone="alert">{count}</Badge>
|
|
128
|
+
</span>
|
|
129
|
+
</button>
|
|
155
130
|
);
|
|
156
131
|
}
|
|
157
132
|
```
|
|
158
133
|
|
|
159
|
-
###
|
|
134
|
+
### With stroke
|
|
160
135
|
|
|
161
136
|
```tsx
|
|
162
137
|
import * as React from 'react';
|
|
163
138
|
import { Badge } from '@xsolla/xui-badge';
|
|
164
139
|
|
|
165
|
-
export default function
|
|
140
|
+
export default function BadgeStroke() {
|
|
166
141
|
return (
|
|
167
|
-
<div style={{
|
|
142
|
+
<div style={{ background: '#222', padding: 16 }}>
|
|
168
143
|
<Badge tone="brand" showStroke>Pro</Badge>
|
|
169
|
-
<Badge tone="success" showStroke>Active</Badge>
|
|
170
144
|
</div>
|
|
171
145
|
);
|
|
172
146
|
}
|
|
173
147
|
```
|
|
174
148
|
|
|
175
|
-
### Status Labels
|
|
176
|
-
|
|
177
|
-
```tsx
|
|
178
|
-
import * as React from 'react';
|
|
179
|
-
import { Badge } from '@xsolla/xui-badge';
|
|
180
|
-
|
|
181
|
-
export default function StatusLabels() {
|
|
182
|
-
const statuses = [
|
|
183
|
-
{ label: 'Published', tone: 'success' as const },
|
|
184
|
-
{ label: 'Draft', tone: 'neutral' as const },
|
|
185
|
-
{ label: 'Pending', tone: 'warning' as const },
|
|
186
|
-
{ label: 'Rejected', tone: 'alert' as const },
|
|
187
|
-
];
|
|
188
|
-
|
|
189
|
-
return (
|
|
190
|
-
<div style={{ display: 'flex', gap: 12 }}>
|
|
191
|
-
{statuses.map((status) => (
|
|
192
|
-
<Badge key={status.label} tone={status.tone} size="md">
|
|
193
|
-
{status.label}
|
|
194
|
-
</Badge>
|
|
195
|
-
))}
|
|
196
|
-
</div>
|
|
197
|
-
);
|
|
198
|
-
}
|
|
199
|
-
```
|
|
200
|
-
|
|
201
|
-
## API Reference
|
|
202
|
-
|
|
203
|
-
### Badge
|
|
204
|
-
|
|
205
|
-
A badge component for counts and status indicators.
|
|
206
|
-
|
|
207
|
-
**Badge Props:**
|
|
208
|
-
|
|
209
|
-
| Prop | Type | Default | Description |
|
|
210
|
-
| :--- | :--- | :------ | :---------- |
|
|
211
|
-
| children | `ReactNode` | - | Badge content (ignored for xs/s sizes). |
|
|
212
|
-
| icon | `ReactNode` | - | Icon to display. |
|
|
213
|
-
| size | `"xl" \| "lg" \| "md" \| "sm" \| "xs"` | `"md"` | Size of the badge. |
|
|
214
|
-
| tone | `"primary" \| "secondary" \| "brand" \| "brandExtra" \| "success" \| "warning" \| "alert" \| "neutral"` | `"alert"` | Color tone. |
|
|
215
|
-
| showStroke | `boolean` | `false` | Show border around badge. |
|
|
216
|
-
| aria-label | `string` | - | Accessible label. |
|
|
217
|
-
| aria-hidden | `boolean` | - | Hide from screen readers. |
|
|
218
|
-
|
|
219
|
-
**Size Behavior:**
|
|
220
|
-
|
|
221
|
-
| Size | Behavior |
|
|
222
|
-
| :--- | :------- |
|
|
223
|
-
| xs | Dot only (8px), no content |
|
|
224
|
-
| sm | Dot only (12px), no content |
|
|
225
|
-
| md | Supports content (20px height) |
|
|
226
|
-
| lg | Supports content (24px height) |
|
|
227
|
-
| xl | Supports content (28px height) |
|
|
228
|
-
|
|
229
|
-
**Tone Color Mapping:**
|
|
230
|
-
|
|
231
|
-
| Tone | Background | Text |
|
|
232
|
-
| :--- | :--------- | :--- |
|
|
233
|
-
| primary | Background primary | Content primary |
|
|
234
|
-
| secondary | Background secondary | Content primary |
|
|
235
|
-
| brand | Brand primary | On brand |
|
|
236
|
-
| brandExtra | BrandExtra primary | On brandExtra |
|
|
237
|
-
| success | Success primary | On success |
|
|
238
|
-
| warning | Warning primary | On warning |
|
|
239
|
-
| alert | Alert primary | On alert |
|
|
240
|
-
| neutral | Neutral primary | On neutral |
|
|
241
|
-
|
|
242
|
-
## Theming
|
|
243
|
-
|
|
244
|
-
Badge uses the design system theme for colors:
|
|
245
|
-
|
|
246
|
-
```typescript
|
|
247
|
-
// Colors accessed via theme (example for "alert" tone)
|
|
248
|
-
theme.colors.background.alert.primary // Background
|
|
249
|
-
theme.colors.content.onAlert // Text color
|
|
250
|
-
```
|
|
251
|
-
|
|
252
149
|
## Accessibility
|
|
253
150
|
|
|
254
|
-
-
|
|
255
|
-
- Dot badges without
|
|
256
|
-
-
|
|
257
|
-
- Text content is automatically announced
|
|
151
|
+
- The root has `role="status"` so changes are announced politely.
|
|
152
|
+
- Dot-only badges (`xs`, `sm`) without an `aria-label` default to `aria-hidden="true"`.
|
|
153
|
+
- Provide `aria-label` for badges that convey state visually only (such as a coloured dot beside an avatar).
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-badge",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.151.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
"test:coverage": "vitest run --coverage"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@xsolla/xui-core": "0.
|
|
18
|
-
"@xsolla/xui-primitives-core": "0.
|
|
17
|
+
"@xsolla/xui-core": "0.151.0",
|
|
18
|
+
"@xsolla/xui-primitives-core": "0.151.0"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"react": ">=16.8.0",
|