@xsolla/xui-button 0.96.0 → 0.97.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 +79 -0
- package/package.json +4 -4
package/README.md
ADDED
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
# @xsolla/xui-button
|
|
2
|
+
|
|
3
|
+
Accessible button components with multiple visual variants, sizes, and states.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
yarn add @xsolla/xui-button
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { Button } from '@xsolla/xui-button';
|
|
15
|
+
|
|
16
|
+
<Button variant="primary" tone="brand" onPress={() => console.log('clicked')}>
|
|
17
|
+
Buy Now
|
|
18
|
+
</Button>
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Components
|
|
22
|
+
|
|
23
|
+
- **Button** — Standard button with optional icons, sublabel, and loading state.
|
|
24
|
+
- **IconButton** — Square icon-only button; requires `aria-label`.
|
|
25
|
+
- **FlexButton** — Compact inline button designed for use inside modals and popups.
|
|
26
|
+
- **ButtonGroup** — Container for grouping related buttons with optional description and error text.
|
|
27
|
+
|
|
28
|
+
## Props
|
|
29
|
+
|
|
30
|
+
### Button
|
|
31
|
+
|
|
32
|
+
| Prop | Type | Default | Description |
|
|
33
|
+
|------|------|---------|-------------|
|
|
34
|
+
| `variant` | `'primary' \| 'secondary' \| 'tertiary'` | `'primary'` | Visual style variant |
|
|
35
|
+
| `tone` | `'brand' \| 'brandExtra' \| 'alert' \| 'mono'` | `'brand'` | Colour tone |
|
|
36
|
+
| `size` | `'xl' \| 'lg' \| 'md' \| 'sm' \| 'xs'` | `'md'` | Button size |
|
|
37
|
+
| `disabled` | `boolean` | `false` | Disables the button |
|
|
38
|
+
| `loading` | `boolean` | `false` | Shows a spinner and blocks interaction |
|
|
39
|
+
| `onPress` | `() => void` | — | Click handler |
|
|
40
|
+
| `iconLeft` | `React.ReactNode` | — | Icon displayed on the left |
|
|
41
|
+
| `iconRight` | `React.ReactNode` | — | Icon displayed on the right |
|
|
42
|
+
| `sublabel` | `string` | — | Secondary inline text shown at reduced opacity |
|
|
43
|
+
| `fullWidth` | `boolean` | `false` | Stretches button to fill its container |
|
|
44
|
+
|
|
45
|
+
### IconButton
|
|
46
|
+
|
|
47
|
+
| Prop | Type | Default | Description |
|
|
48
|
+
|------|------|---------|-------------|
|
|
49
|
+
| `icon` | `React.ReactNode` | — | Icon to display (required) |
|
|
50
|
+
| `aria-label` | `string` | — | Accessible label (required) |
|
|
51
|
+
| `variant` | `'primary' \| 'secondary' \| 'tertiary'` | `'primary'` | Visual style variant |
|
|
52
|
+
| `tone` | `'brand' \| 'brandExtra' \| 'alert' \| 'mono'` | `'brand'` | Colour tone |
|
|
53
|
+
| `size` | `'xl' \| 'lg' \| 'md' \| 'sm' \| 'xs'` | `'md'` | Button size |
|
|
54
|
+
| `disabled` | `boolean` | `false` | Disables the button |
|
|
55
|
+
| `loading` | `boolean` | `false` | Shows a spinner and blocks interaction |
|
|
56
|
+
| `onPress` | `() => void` | — | Click handler |
|
|
57
|
+
|
|
58
|
+
### FlexButton
|
|
59
|
+
|
|
60
|
+
| Prop | Type | Default | Description |
|
|
61
|
+
|------|------|---------|-------------|
|
|
62
|
+
| `variant` | `'brand' \| 'primary' \| 'secondary' \| 'tertiary' \| 'brandExtra' \| 'inverse'` | `'brand'` | Visual style variant |
|
|
63
|
+
| `size` | `'xl' \| 'lg' \| 'md' \| 'sm' \| 'xs'` | `'md'` | Button size |
|
|
64
|
+
| `background` | `boolean` | `false` | Adds a filled background |
|
|
65
|
+
| `disabled` | `boolean` | `false` | Disables the button |
|
|
66
|
+
| `loading` | `boolean` | `false` | Shows a spinner and blocks interaction |
|
|
67
|
+
| `iconLeft` | `React.ReactNode` | — | Icon on the left |
|
|
68
|
+
| `iconRight` | `React.ReactNode` | — | Icon on the right |
|
|
69
|
+
| `onPress` | `() => void` | — | Click handler |
|
|
70
|
+
|
|
71
|
+
### ButtonGroup
|
|
72
|
+
|
|
73
|
+
| Prop | Type | Default | Description |
|
|
74
|
+
|------|------|---------|-------------|
|
|
75
|
+
| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout direction |
|
|
76
|
+
| `size` | `'xl' \| 'lg' \| 'md' \| 'sm' \| 'xs'` | `'md'` | Controls default gap between buttons |
|
|
77
|
+
| `gap` | `number` | — | Custom gap in pixels (overrides size default) |
|
|
78
|
+
| `description` | `string` | — | Helper text below the group |
|
|
79
|
+
| `error` | `string` | — | Error message below the group |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-button",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.97.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -13,9 +13,9 @@
|
|
|
13
13
|
"test:coverage": "vitest run --coverage"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@xsolla/xui-core": "0.
|
|
17
|
-
"@xsolla/xui-icons": "0.
|
|
18
|
-
"@xsolla/xui-primitives-core": "0.
|
|
16
|
+
"@xsolla/xui-core": "0.97.0",
|
|
17
|
+
"@xsolla/xui-icons": "0.97.0",
|
|
18
|
+
"@xsolla/xui-primitives-core": "0.97.0"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"react": ">=16.8.0",
|