@xsolla/xui-badge 0.99.0 → 0.100.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 +245 -13
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,31 +1,263 @@
|
|
|
1
|
-
|
|
1
|
+
---
|
|
2
|
+
title: Badge
|
|
3
|
+
subtitle: A badge for counts and status indicators.
|
|
4
|
+
description: A cross-platform React badge component for displaying counts, status dots, and small labels.
|
|
5
|
+
---
|
|
2
6
|
|
|
3
|
-
|
|
7
|
+
# Badge
|
|
8
|
+
|
|
9
|
+
A cross-platform React badge component for displaying counts, status indicators, and small labels. Supports multiple sizes and color tones.
|
|
4
10
|
|
|
5
11
|
## Installation
|
|
6
12
|
|
|
7
13
|
```bash
|
|
14
|
+
npm install @xsolla/xui-badge
|
|
15
|
+
# or
|
|
8
16
|
yarn add @xsolla/xui-badge
|
|
9
17
|
```
|
|
10
18
|
|
|
11
|
-
##
|
|
19
|
+
## Demo
|
|
20
|
+
|
|
21
|
+
### Basic Badge
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import * as React from 'react';
|
|
25
|
+
import { Badge } from '@xsolla/xui-badge';
|
|
26
|
+
|
|
27
|
+
export default function BasicBadge() {
|
|
28
|
+
return (
|
|
29
|
+
<div style={{ display: 'flex', gap: 16 }}>
|
|
30
|
+
<Badge>5</Badge>
|
|
31
|
+
<Badge>99+</Badge>
|
|
32
|
+
<Badge>New</Badge>
|
|
33
|
+
</div>
|
|
34
|
+
);
|
|
35
|
+
}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### Badge Tones
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
import * as React from 'react';
|
|
42
|
+
import { Badge } from '@xsolla/xui-badge';
|
|
43
|
+
|
|
44
|
+
export default function BadgeTones() {
|
|
45
|
+
return (
|
|
46
|
+
<div style={{ display: 'flex', gap: 16 }}>
|
|
47
|
+
<Badge tone="primary">Primary</Badge>
|
|
48
|
+
<Badge tone="secondary">Secondary</Badge>
|
|
49
|
+
<Badge tone="brand">Brand</Badge>
|
|
50
|
+
<Badge tone="brandExtra">Extra</Badge>
|
|
51
|
+
<Badge tone="success">Success</Badge>
|
|
52
|
+
<Badge tone="warning">Warning</Badge>
|
|
53
|
+
<Badge tone="alert">Alert</Badge>
|
|
54
|
+
<Badge tone="neutral">Neutral</Badge>
|
|
55
|
+
</div>
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
### Badge Sizes
|
|
61
|
+
|
|
62
|
+
```tsx
|
|
63
|
+
import * as React from 'react';
|
|
64
|
+
import { Badge } from '@xsolla/xui-badge';
|
|
65
|
+
|
|
66
|
+
export default function BadgeSizes() {
|
|
67
|
+
return (
|
|
68
|
+
<div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
|
|
69
|
+
<Badge size="xs" tone="alert" /> {/* Dot only */}
|
|
70
|
+
<Badge size="sm" tone="alert" /> {/* Dot only */}
|
|
71
|
+
<Badge size="md" tone="alert">5</Badge>
|
|
72
|
+
<Badge size="lg" tone="alert">5</Badge>
|
|
73
|
+
<Badge size="xl" tone="alert">5</Badge>
|
|
74
|
+
</div>
|
|
75
|
+
);
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### Badge with Icon
|
|
80
|
+
|
|
81
|
+
```tsx
|
|
82
|
+
import * as React from 'react';
|
|
83
|
+
import { Badge } from '@xsolla/xui-badge';
|
|
84
|
+
import { Check, AlertCircle } from '@xsolla/xui-icons';
|
|
85
|
+
import { Star } from '@xsolla/xui-icons-base';
|
|
86
|
+
|
|
87
|
+
export default function BadgeWithIcon() {
|
|
88
|
+
return (
|
|
89
|
+
<div style={{ display: 'flex', gap: 16 }}>
|
|
90
|
+
<Badge icon={<Star size={12} />} tone="warning">Featured</Badge>
|
|
91
|
+
<Badge icon={<Check size={12} />} tone="success">Verified</Badge>
|
|
92
|
+
<Badge icon={<AlertCircle size={12} />} tone="alert">Error</Badge>
|
|
93
|
+
</div>
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
### Dot Badge (Status Indicator)
|
|
12
99
|
|
|
13
100
|
```tsx
|
|
14
|
-
import
|
|
101
|
+
import * as React from 'react';
|
|
102
|
+
import { Badge } from '@xsolla/xui-badge';
|
|
103
|
+
|
|
104
|
+
export default function DotBadge() {
|
|
105
|
+
return (
|
|
106
|
+
<div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
|
|
107
|
+
<span>Online</span>
|
|
108
|
+
<Badge size="xs" tone="success" />
|
|
15
109
|
|
|
16
|
-
<
|
|
110
|
+
<span>Away</span>
|
|
111
|
+
<Badge size="xs" tone="warning" />
|
|
17
112
|
|
|
18
|
-
|
|
19
|
-
<Badge
|
|
113
|
+
<span>Busy</span>
|
|
114
|
+
<Badge size="xs" tone="alert" />
|
|
115
|
+
|
|
116
|
+
<span>Offline</span>
|
|
117
|
+
<Badge size="xs" tone="neutral" />
|
|
118
|
+
</div>
|
|
119
|
+
);
|
|
120
|
+
}
|
|
20
121
|
```
|
|
21
122
|
|
|
22
|
-
##
|
|
123
|
+
## Anatomy
|
|
124
|
+
|
|
125
|
+
Import the component and use it directly:
|
|
126
|
+
|
|
127
|
+
```jsx
|
|
128
|
+
import { Badge } from '@xsolla/xui-badge';
|
|
129
|
+
|
|
130
|
+
<Badge
|
|
131
|
+
size="md" // Size variant (xs/s are dots only)
|
|
132
|
+
tone="alert" // Color tone
|
|
133
|
+
icon={<Icon />} // Optional icon
|
|
134
|
+
showStroke={false} // Show border
|
|
135
|
+
>
|
|
136
|
+
Content
|
|
137
|
+
</Badge>
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
## Examples
|
|
141
|
+
|
|
142
|
+
### Notification Count
|
|
143
|
+
|
|
144
|
+
```tsx
|
|
145
|
+
import * as React from 'react';
|
|
146
|
+
import { Badge } from '@xsolla/xui-badge';
|
|
147
|
+
import { Bell } from '@xsolla/xui-icons';
|
|
148
|
+
|
|
149
|
+
export default function NotificationBadge() {
|
|
150
|
+
const count = 12;
|
|
151
|
+
|
|
152
|
+
return (
|
|
153
|
+
<div style={{ position: 'relative', display: 'inline-block' }}>
|
|
154
|
+
<Bell size={24} />
|
|
155
|
+
<div style={{ position: 'absolute', top: -8, right: -8 }}>
|
|
156
|
+
<Badge tone="alert" size="md">
|
|
157
|
+
{count > 99 ? '99+' : count}
|
|
158
|
+
</Badge>
|
|
159
|
+
</div>
|
|
160
|
+
</div>
|
|
161
|
+
);
|
|
162
|
+
}
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
### Badge with Stroke
|
|
166
|
+
|
|
167
|
+
```tsx
|
|
168
|
+
import * as React from 'react';
|
|
169
|
+
import { Badge } from '@xsolla/xui-badge';
|
|
170
|
+
|
|
171
|
+
export default function BadgeWithStroke() {
|
|
172
|
+
return (
|
|
173
|
+
<div style={{ display: 'flex', gap: 16 }}>
|
|
174
|
+
<Badge tone="brand" showStroke>Pro</Badge>
|
|
175
|
+
<Badge tone="success" showStroke>Active</Badge>
|
|
176
|
+
</div>
|
|
177
|
+
);
|
|
178
|
+
}
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
### Status Labels
|
|
182
|
+
|
|
183
|
+
```tsx
|
|
184
|
+
import * as React from 'react';
|
|
185
|
+
import { Badge } from '@xsolla/xui-badge';
|
|
186
|
+
|
|
187
|
+
export default function StatusLabels() {
|
|
188
|
+
const statuses = [
|
|
189
|
+
{ label: 'Published', tone: 'success' as const },
|
|
190
|
+
{ label: 'Draft', tone: 'neutral' as const },
|
|
191
|
+
{ label: 'Pending', tone: 'warning' as const },
|
|
192
|
+
{ label: 'Rejected', tone: 'alert' as const },
|
|
193
|
+
];
|
|
194
|
+
|
|
195
|
+
return (
|
|
196
|
+
<div style={{ display: 'flex', gap: 12 }}>
|
|
197
|
+
{statuses.map((status) => (
|
|
198
|
+
<Badge key={status.label} tone={status.tone} size="md">
|
|
199
|
+
{status.label}
|
|
200
|
+
</Badge>
|
|
201
|
+
))}
|
|
202
|
+
</div>
|
|
203
|
+
);
|
|
204
|
+
}
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
## API Reference
|
|
23
208
|
|
|
24
209
|
### Badge
|
|
25
210
|
|
|
211
|
+
A badge component for counts and status indicators.
|
|
212
|
+
|
|
213
|
+
**Badge Props:**
|
|
214
|
+
|
|
26
215
|
| Prop | Type | Default | Description |
|
|
27
|
-
|
|
28
|
-
|
|
|
29
|
-
|
|
|
30
|
-
|
|
|
31
|
-
|
|
|
216
|
+
| :--- | :--- | :------ | :---------- |
|
|
217
|
+
| children | `ReactNode` | - | Badge content (ignored for xs/s sizes). |
|
|
218
|
+
| icon | `ReactNode` | - | Icon to display. |
|
|
219
|
+
| size | `"xl" \| "lg" \| "md" \| "sm" \| "xs"` | `"md"` | Size of the badge. |
|
|
220
|
+
| tone | `"primary" \| "secondary" \| "brand" \| "brandExtra" \| "success" \| "warning" \| "alert" \| "neutral"` | `"alert"` | Color tone. |
|
|
221
|
+
| showStroke | `boolean` | `false` | Show border around badge. |
|
|
222
|
+
| aria-label | `string` | - | Accessible label. |
|
|
223
|
+
| aria-hidden | `boolean` | - | Hide from screen readers. |
|
|
224
|
+
|
|
225
|
+
**Size Behavior:**
|
|
226
|
+
|
|
227
|
+
| Size | Behavior |
|
|
228
|
+
| :--- | :------- |
|
|
229
|
+
| xs | Dot only (8px), no content |
|
|
230
|
+
| sm | Dot only (12px), no content |
|
|
231
|
+
| md | Supports content (20px height) |
|
|
232
|
+
| lg | Supports content (24px height) |
|
|
233
|
+
| xl | Supports content (28px height) |
|
|
234
|
+
|
|
235
|
+
**Tone Color Mapping:**
|
|
236
|
+
|
|
237
|
+
| Tone | Background | Text |
|
|
238
|
+
| :--- | :--------- | :--- |
|
|
239
|
+
| primary | Background primary | Content primary |
|
|
240
|
+
| secondary | Background secondary | Content primary |
|
|
241
|
+
| brand | Brand primary | On brand |
|
|
242
|
+
| brandExtra | BrandExtra primary | On brandExtra |
|
|
243
|
+
| success | Success primary | On success |
|
|
244
|
+
| warning | Warning primary | On warning |
|
|
245
|
+
| alert | Alert primary | On alert |
|
|
246
|
+
| neutral | Neutral primary | On neutral |
|
|
247
|
+
|
|
248
|
+
## Theming
|
|
249
|
+
|
|
250
|
+
Badge uses the design system theme for colors:
|
|
251
|
+
|
|
252
|
+
```typescript
|
|
253
|
+
// Colors accessed via theme (example for "alert" tone)
|
|
254
|
+
theme.colors.background.alert.primary // Background
|
|
255
|
+
theme.colors.content.onAlert // Text color
|
|
256
|
+
```
|
|
257
|
+
|
|
258
|
+
## Accessibility
|
|
259
|
+
|
|
260
|
+
- Uses `role="status"` for proper semantics
|
|
261
|
+
- Dot badges without labels use `aria-hidden` by default
|
|
262
|
+
- Supports custom `aria-label` for screen readers
|
|
263
|
+
- Text content is automatically announced
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-badge",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.100.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.100.0",
|
|
18
|
+
"@xsolla/xui-primitives-core": "0.100.0"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"react": ">=16.8.0",
|