@xsolla/xui-button 0.174.3 → 0.175.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 +37 -2
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,6 +1,36 @@
|
|
|
1
1
|
# Button
|
|
2
2
|
|
|
3
3
|
A cross-platform React button component with primary/secondary variants, multiple color tones, sizes, loading states, and icon support. Works on both React (web) and React Native.
|
|
4
|
+
<!-- BEGIN:xui-mcp-instructions:button -->
|
|
5
|
+
An interactive element that triggers an action or event. Buttons communicate what will happen when the user activates them and are the primary way to drive decisions and actions across the product.
|
|
6
|
+
|
|
7
|
+
### When to use
|
|
8
|
+
- To trigger a primary action on a page or in a dialog (submit, save, confirm, proceed)
|
|
9
|
+
- To offer secondary or alternative actions alongside a primary one
|
|
10
|
+
- To navigate to a new state or screen when a link is semantically inappropriate
|
|
11
|
+
- When the action needs clear visual affordance — something clickable and intentional, not passive
|
|
12
|
+
|
|
13
|
+
### When not to use
|
|
14
|
+
- For toggling a binary on/off state — use a Switch
|
|
15
|
+
- For filtering or selecting options — use a ToggleButtonGroup, MultiSelect or Select instead
|
|
16
|
+
- Avoid using more than one Primary button in the same section — it dilutes hierarchy
|
|
17
|
+
|
|
18
|
+
### Content guidelines
|
|
19
|
+
- Labels should be short, action-oriented, and written in sentence case: *"Save changes"*, *"Delete account"*, not *"SAVE CHANGES"*.
|
|
20
|
+
- Use verbs that clearly describe the action: *"Create"*, *"Submit"*, *"Confirm"*, not vague labels like *"OK"* or *"Click here"*.
|
|
21
|
+
- For Alert tone (destructive actions), be explicit: *"Delete"*, *"Remove"*, *"Cancel subscription"* — not softened labels that hide the consequence.
|
|
22
|
+
- Loading state labels should have been descriptive before the state change — users already read the label before clicking, so hiding it during loading is acceptable.
|
|
23
|
+
- Keep labels under 3 words wherever possible. If the action needs explanation, add helper text nearby — not in the button.
|
|
24
|
+
|
|
25
|
+
### Behaviour guidelines
|
|
26
|
+
- One Primary button per view — hierarchy breaks when multiple high-emphasis buttons compete (Material Design, Carbon, Polaris all enforce this).
|
|
27
|
+
- Button width — buttons should be wide enough for their label plus padding; avoid stretching a button to fill a full container unless in a modal or mobile context.
|
|
28
|
+
- Destructive actions — always use Tone=Alert for irreversible operations. Consider adding a confirmation dialog before executing.
|
|
29
|
+
- Loading state — disable interaction immediately on click to prevent double-submission. Show the Loading state for the duration of the async operation, then return to Default (success) or surface an error.
|
|
30
|
+
- Disabled vs. hidden — prefer hiding a button over disabling it when the reason for unavailability is not obvious. If disabled, provide a tooltip or helper text explaining why.
|
|
31
|
+
- Icon-only buttons — if the label is removed entirely use Icon button component
|
|
32
|
+
- Touch targets — on mobile, the minimum touch target should be 44×44px. Sizes S (40px) and XS (32px) may need extra padding in touch contexts.
|
|
33
|
+
<!-- END:xui-mcp-instructions:button -->
|
|
4
34
|
|
|
5
35
|
## Installation
|
|
6
36
|
|
|
@@ -181,7 +211,8 @@ export default function DisabledButton() {
|
|
|
181
211
|
|
|
182
212
|
### Icon Button
|
|
183
213
|
|
|
184
|
-
|
|
214
|
+
<!-- BEGIN:xui-mcp-instructions:iconbutton -->
|
|
215
|
+
<!-- END:xui-mcp-instructions:iconbutton -->
|
|
185
216
|
|
|
186
217
|
```tsx
|
|
187
218
|
import * as React from "react";
|
|
@@ -206,7 +237,9 @@ export default function IconButtonExample() {
|
|
|
206
237
|
|
|
207
238
|
### Button Group
|
|
208
239
|
|
|
240
|
+
<!-- BEGIN:xui-mcp-instructions:button-group -->
|
|
209
241
|
Use `ButtonGroup` to group related buttons together.
|
|
242
|
+
<!-- END:xui-mcp-instructions:button-group -->
|
|
210
243
|
|
|
211
244
|
```tsx
|
|
212
245
|
import * as React from "react";
|
|
@@ -241,7 +274,9 @@ export default function VerticalButtonGroup() {
|
|
|
241
274
|
|
|
242
275
|
### Flex Button
|
|
243
276
|
|
|
244
|
-
|
|
277
|
+
<!-- BEGIN:xui-mcp-instructions:flexbutton -->
|
|
278
|
+
`FlexButton` provides more flexible styling options with different background modes.
|
|
279
|
+
<!-- END:xui-mcp-instructions:flexbutton -->
|
|
245
280
|
|
|
246
281
|
```tsx
|
|
247
282
|
import * as React from "react";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-button",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.175.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.175.0",
|
|
17
|
+
"@xsolla/xui-icons": "0.175.0",
|
|
18
|
+
"@xsolla/xui-primitives-core": "0.175.0"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"react": ">=16.8.0",
|