@xsolla/xui-button 0.157.0 → 0.158.0-pr306.1779437575
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 +144 -162
- package/native/index.js +11 -3
- package/native/index.js.map +1 -1
- package/native/index.mjs +11 -3
- package/native/index.mjs.map +1 -1
- package/package.json +4 -4
- package/web/index.js +13 -4
- package/web/index.js.map +1 -1
- package/web/index.mjs +13 -4
- package/web/index.mjs.map +1 -1
package/README.md
CHANGED
|
@@ -13,27 +13,23 @@ npm install @xsolla/xui-button
|
|
|
13
13
|
### Basic Button
|
|
14
14
|
|
|
15
15
|
```tsx
|
|
16
|
-
import * as React from
|
|
17
|
-
import { Button } from
|
|
16
|
+
import * as React from "react";
|
|
17
|
+
import { Button } from "@xsolla/xui-button";
|
|
18
18
|
|
|
19
19
|
export default function BasicButton() {
|
|
20
|
-
return (
|
|
21
|
-
<Button onPress={() => console.log('Pressed!')}>
|
|
22
|
-
Click me
|
|
23
|
-
</Button>
|
|
24
|
-
);
|
|
20
|
+
return <Button onPress={() => console.log("Pressed!")}>Click me</Button>;
|
|
25
21
|
}
|
|
26
22
|
```
|
|
27
23
|
|
|
28
24
|
### Button Variants
|
|
29
25
|
|
|
30
26
|
```tsx
|
|
31
|
-
import * as React from
|
|
32
|
-
import { Button } from
|
|
27
|
+
import * as React from "react";
|
|
28
|
+
import { Button } from "@xsolla/xui-button";
|
|
33
29
|
|
|
34
30
|
export default function ButtonVariants() {
|
|
35
31
|
return (
|
|
36
|
-
<div style={{ display:
|
|
32
|
+
<div style={{ display: "flex", gap: 16 }}>
|
|
37
33
|
<Button variant="primary">Primary</Button>
|
|
38
34
|
<Button variant="secondary">Secondary</Button>
|
|
39
35
|
<Button variant="tertiary">Tertiary</Button>
|
|
@@ -45,12 +41,12 @@ export default function ButtonVariants() {
|
|
|
45
41
|
### Button Tones
|
|
46
42
|
|
|
47
43
|
```tsx
|
|
48
|
-
import * as React from
|
|
49
|
-
import { Button } from
|
|
44
|
+
import * as React from "react";
|
|
45
|
+
import { Button } from "@xsolla/xui-button";
|
|
50
46
|
|
|
51
47
|
export default function ButtonTones() {
|
|
52
48
|
return (
|
|
53
|
-
<div style={{ display:
|
|
49
|
+
<div style={{ display: "flex", gap: 16 }}>
|
|
54
50
|
<Button tone="brand">Brand</Button>
|
|
55
51
|
<Button tone="brandExtra">Brand Extra</Button>
|
|
56
52
|
<Button tone="alert">Alert</Button>
|
|
@@ -63,12 +59,12 @@ export default function ButtonTones() {
|
|
|
63
59
|
### Button Sizes
|
|
64
60
|
|
|
65
61
|
```tsx
|
|
66
|
-
import * as React from
|
|
67
|
-
import { Button } from
|
|
62
|
+
import * as React from "react";
|
|
63
|
+
import { Button } from "@xsolla/xui-button";
|
|
68
64
|
|
|
69
65
|
export default function ButtonSizes() {
|
|
70
66
|
return (
|
|
71
|
-
<div style={{ display:
|
|
67
|
+
<div style={{ display: "flex", gap: 16, alignItems: "center" }}>
|
|
72
68
|
<Button size="xs">Extra Small</Button>
|
|
73
69
|
<Button size="sm">Small</Button>
|
|
74
70
|
<Button size="md">Medium</Button>
|
|
@@ -82,24 +78,17 @@ export default function ButtonSizes() {
|
|
|
82
78
|
### Button with Icons
|
|
83
79
|
|
|
84
80
|
```tsx
|
|
85
|
-
import * as React from
|
|
86
|
-
import { Button } from
|
|
87
|
-
import { Plus, ChevronDown, FileDownloadOut } from
|
|
88
|
-
import { ArrowRight } from
|
|
81
|
+
import * as React from "react";
|
|
82
|
+
import { Button } from "@xsolla/xui-button";
|
|
83
|
+
import { Plus, ChevronDown, FileDownloadOut } from "@xsolla/xui-icons-base";
|
|
84
|
+
import { ArrowRight } from "@xsolla/xui-icons";
|
|
89
85
|
|
|
90
86
|
export default function ButtonWithIcons() {
|
|
91
87
|
return (
|
|
92
|
-
<div style={{ display:
|
|
93
|
-
<Button iconLeft={<Plus />}>
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
<Button iconRight={<ArrowRight />}>
|
|
97
|
-
Next Step
|
|
98
|
-
</Button>
|
|
99
|
-
<Button
|
|
100
|
-
iconLeft={<FileDownloadOut />}
|
|
101
|
-
iconRight={<ChevronDown />}
|
|
102
|
-
>
|
|
88
|
+
<div style={{ display: "flex", gap: 16 }}>
|
|
89
|
+
<Button iconLeft={<Plus />}>Add Item</Button>
|
|
90
|
+
<Button iconRight={<ArrowRight />}>Next Step</Button>
|
|
91
|
+
<Button iconLeft={<FileDownloadOut />} iconRight={<ChevronDown />}>
|
|
103
92
|
Download
|
|
104
93
|
</Button>
|
|
105
94
|
</div>
|
|
@@ -110,8 +99,8 @@ export default function ButtonWithIcons() {
|
|
|
110
99
|
### Loading Button
|
|
111
100
|
|
|
112
101
|
```tsx
|
|
113
|
-
import * as React from
|
|
114
|
-
import { Button } from
|
|
102
|
+
import * as React from "react";
|
|
103
|
+
import { Button } from "@xsolla/xui-button";
|
|
115
104
|
|
|
116
105
|
export default function LoadingButton() {
|
|
117
106
|
const [loading, setLoading] = React.useState(false);
|
|
@@ -123,7 +112,7 @@ export default function LoadingButton() {
|
|
|
123
112
|
|
|
124
113
|
return (
|
|
125
114
|
<Button loading={loading} onPress={handlePress}>
|
|
126
|
-
{loading ?
|
|
115
|
+
{loading ? "Processing..." : "Submit"}
|
|
127
116
|
</Button>
|
|
128
117
|
);
|
|
129
118
|
}
|
|
@@ -160,8 +149,8 @@ import { Plus } from '@xsolla/xui-icons-base';
|
|
|
160
149
|
Use the `fullWidth` prop to make the button span the entire container width.
|
|
161
150
|
|
|
162
151
|
```tsx
|
|
163
|
-
import * as React from
|
|
164
|
-
import { Button } from
|
|
152
|
+
import * as React from "react";
|
|
153
|
+
import { Button } from "@xsolla/xui-button";
|
|
165
154
|
|
|
166
155
|
export default function FullWidthButton() {
|
|
167
156
|
return (
|
|
@@ -175,14 +164,16 @@ export default function FullWidthButton() {
|
|
|
175
164
|
### Disabled Button
|
|
176
165
|
|
|
177
166
|
```tsx
|
|
178
|
-
import * as React from
|
|
179
|
-
import { Button } from
|
|
167
|
+
import * as React from "react";
|
|
168
|
+
import { Button } from "@xsolla/xui-button";
|
|
180
169
|
|
|
181
170
|
export default function DisabledButton() {
|
|
182
171
|
return (
|
|
183
|
-
<div style={{ display:
|
|
172
|
+
<div style={{ display: "flex", gap: 16 }}>
|
|
184
173
|
<Button disabled>Disabled Primary</Button>
|
|
185
|
-
<Button variant="secondary" disabled>
|
|
174
|
+
<Button variant="secondary" disabled>
|
|
175
|
+
Disabled Secondary
|
|
176
|
+
</Button>
|
|
186
177
|
</div>
|
|
187
178
|
);
|
|
188
179
|
}
|
|
@@ -193,24 +184,16 @@ export default function DisabledButton() {
|
|
|
193
184
|
Use `IconButton` for buttons that contain only an icon.
|
|
194
185
|
|
|
195
186
|
```tsx
|
|
196
|
-
import * as React from
|
|
197
|
-
import { IconButton } from
|
|
198
|
-
import { Plus, TrashCan } from
|
|
199
|
-
import { Settings } from
|
|
187
|
+
import * as React from "react";
|
|
188
|
+
import { IconButton } from "@xsolla/xui-button";
|
|
189
|
+
import { Plus, TrashCan } from "@xsolla/xui-icons-base";
|
|
190
|
+
import { Settings } from "@xsolla/xui-icons";
|
|
200
191
|
|
|
201
192
|
export default function IconButtonExample() {
|
|
202
193
|
return (
|
|
203
|
-
<div style={{ display:
|
|
204
|
-
<IconButton
|
|
205
|
-
|
|
206
|
-
aria-label="Add"
|
|
207
|
-
size="md"
|
|
208
|
-
/>
|
|
209
|
-
<IconButton
|
|
210
|
-
icon={<TrashCan />}
|
|
211
|
-
aria-label="Delete"
|
|
212
|
-
tone="alert"
|
|
213
|
-
/>
|
|
194
|
+
<div style={{ display: "flex", gap: 16 }}>
|
|
195
|
+
<IconButton icon={<Plus />} aria-label="Add" size="md" />
|
|
196
|
+
<IconButton icon={<TrashCan />} aria-label="Delete" tone="alert" />
|
|
214
197
|
<IconButton
|
|
215
198
|
icon={<Settings />}
|
|
216
199
|
aria-label="Settings"
|
|
@@ -226,8 +209,8 @@ export default function IconButtonExample() {
|
|
|
226
209
|
Use `ButtonGroup` to group related buttons together.
|
|
227
210
|
|
|
228
211
|
```tsx
|
|
229
|
-
import * as React from
|
|
230
|
-
import { Button, ButtonGroup } from
|
|
212
|
+
import * as React from "react";
|
|
213
|
+
import { Button, ButtonGroup } from "@xsolla/xui-button";
|
|
231
214
|
|
|
232
215
|
export default function ButtonGroupExample() {
|
|
233
216
|
return (
|
|
@@ -242,8 +225,8 @@ export default function ButtonGroupExample() {
|
|
|
242
225
|
### Vertical Button Group
|
|
243
226
|
|
|
244
227
|
```tsx
|
|
245
|
-
import * as React from
|
|
246
|
-
import { Button, ButtonGroup } from
|
|
228
|
+
import * as React from "react";
|
|
229
|
+
import { Button, ButtonGroup } from "@xsolla/xui-button";
|
|
247
230
|
|
|
248
231
|
export default function VerticalButtonGroup() {
|
|
249
232
|
return (
|
|
@@ -261,19 +244,17 @@ export default function VerticalButtonGroup() {
|
|
|
261
244
|
`FlexButton` provides more flexible styling options with different background modes.
|
|
262
245
|
|
|
263
246
|
```tsx
|
|
264
|
-
import * as React from
|
|
265
|
-
import { FlexButton } from
|
|
266
|
-
import { Link } from
|
|
247
|
+
import * as React from "react";
|
|
248
|
+
import { FlexButton } from "@xsolla/xui-button";
|
|
249
|
+
import { Link } from "@xsolla/xui-icons-base";
|
|
267
250
|
|
|
268
251
|
export default function FlexButtonExample() {
|
|
269
252
|
return (
|
|
270
|
-
<div style={{ display:
|
|
253
|
+
<div style={{ display: "flex", gap: 16 }}>
|
|
271
254
|
<FlexButton variant="brand" background>
|
|
272
255
|
With Background
|
|
273
256
|
</FlexButton>
|
|
274
|
-
<FlexButton variant="brand">
|
|
275
|
-
Text Only
|
|
276
|
-
</FlexButton>
|
|
257
|
+
<FlexButton variant="brand">Text Only</FlexButton>
|
|
277
258
|
<FlexButton variant="tertiary" iconLeft={<Link />}>
|
|
278
259
|
Link Style
|
|
279
260
|
</FlexButton>
|
|
@@ -285,15 +266,17 @@ export default function FlexButtonExample() {
|
|
|
285
266
|
### Form Submit Button
|
|
286
267
|
|
|
287
268
|
```tsx
|
|
288
|
-
import * as React from
|
|
289
|
-
import { Button } from
|
|
269
|
+
import * as React from "react";
|
|
270
|
+
import { Button } from "@xsolla/xui-button";
|
|
290
271
|
|
|
291
272
|
export default function FormSubmitButton() {
|
|
292
273
|
return (
|
|
293
|
-
<form
|
|
294
|
-
e
|
|
295
|
-
|
|
296
|
-
|
|
274
|
+
<form
|
|
275
|
+
onSubmit={(e) => {
|
|
276
|
+
e.preventDefault();
|
|
277
|
+
console.log("Form submitted");
|
|
278
|
+
}}
|
|
279
|
+
>
|
|
297
280
|
<Button type="submit">Submit Form</Button>
|
|
298
281
|
</form>
|
|
299
282
|
);
|
|
@@ -305,17 +288,13 @@ export default function FormSubmitButton() {
|
|
|
305
288
|
Use the `sublabel` prop to add secondary text inline with the main label.
|
|
306
289
|
|
|
307
290
|
```tsx
|
|
308
|
-
import * as React from
|
|
309
|
-
import { Button } from
|
|
310
|
-
import { Apple } from
|
|
291
|
+
import * as React from "react";
|
|
292
|
+
import { Button } from "@xsolla/xui-button";
|
|
293
|
+
import { Apple } from "@xsolla/xui-icons-brand";
|
|
311
294
|
|
|
312
295
|
export default function ButtonWithSublabel() {
|
|
313
296
|
return (
|
|
314
|
-
<Button
|
|
315
|
-
iconLeft={<Apple />}
|
|
316
|
-
sublabel="$39.99"
|
|
317
|
-
labelAlignment="left"
|
|
318
|
-
>
|
|
297
|
+
<Button iconLeft={<Apple />} sublabel="$39.99" labelAlignment="left">
|
|
319
298
|
Buy Now
|
|
320
299
|
</Button>
|
|
321
300
|
);
|
|
@@ -327,17 +306,14 @@ export default function ButtonWithSublabel() {
|
|
|
327
306
|
Use `customContent` to add badges, tags, or other elements inside the button.
|
|
328
307
|
|
|
329
308
|
```tsx
|
|
330
|
-
import * as React from
|
|
331
|
-
import { Button } from
|
|
332
|
-
import { Tag } from
|
|
333
|
-
import { ArrowRight } from
|
|
309
|
+
import * as React from "react";
|
|
310
|
+
import { Button } from "@xsolla/xui-button";
|
|
311
|
+
import { Tag } from "@xsolla/xui-tag";
|
|
312
|
+
import { ArrowRight } from "@xsolla/xui-icons-base";
|
|
334
313
|
|
|
335
314
|
export default function ButtonWithCustomContent() {
|
|
336
315
|
return (
|
|
337
|
-
<Button
|
|
338
|
-
iconRight={<ArrowRight />}
|
|
339
|
-
customContent={<Tag size="sm">5x</Tag>}
|
|
340
|
-
>
|
|
316
|
+
<Button iconRight={<ArrowRight />} customContent={<Tag size="sm">5x</Tag>}>
|
|
341
317
|
Claim Reward
|
|
342
318
|
</Button>
|
|
343
319
|
);
|
|
@@ -349,23 +325,28 @@ export default function ButtonWithCustomContent() {
|
|
|
349
325
|
The tertiary variant is a subtle filled button with a muted background and border. It is commonly used for secondary actions inside content cards (e.g. "Activate" in game cards).
|
|
350
326
|
|
|
351
327
|
```tsx
|
|
352
|
-
import * as React from
|
|
353
|
-
import { Button, IconButton } from
|
|
354
|
-
import { Settings, ArrowRight } from
|
|
328
|
+
import * as React from "react";
|
|
329
|
+
import { Button, IconButton } from "@xsolla/xui-button";
|
|
330
|
+
import { Settings, ArrowRight } from "@xsolla/xui-icons-base";
|
|
355
331
|
|
|
356
332
|
export default function TertiaryButtons() {
|
|
357
333
|
return (
|
|
358
|
-
<div style={{ display:
|
|
334
|
+
<div style={{ display: "flex", gap: 16 }}>
|
|
359
335
|
<Button variant="tertiary" tone="brand" size="xs">
|
|
360
336
|
Activate
|
|
361
337
|
</Button>
|
|
362
|
-
<Button
|
|
338
|
+
<Button
|
|
339
|
+
variant="tertiary"
|
|
340
|
+
tone="brand"
|
|
341
|
+
size="xs"
|
|
342
|
+
iconRight={<ArrowRight />}
|
|
343
|
+
>
|
|
363
344
|
Details
|
|
364
345
|
</Button>
|
|
365
346
|
<Button variant="tertiary">Learn More</Button>
|
|
366
|
-
<IconButton
|
|
367
|
-
variant="tertiary"
|
|
368
|
-
icon={<Settings />}
|
|
347
|
+
<IconButton
|
|
348
|
+
variant="tertiary"
|
|
349
|
+
icon={<Settings />}
|
|
369
350
|
aria-label="Settings"
|
|
370
351
|
/>
|
|
371
352
|
</div>
|
|
@@ -381,31 +362,32 @@ The main button component. Renders a semantic `<button>` element.
|
|
|
381
362
|
|
|
382
363
|
**Button Props:**
|
|
383
364
|
|
|
384
|
-
| Prop
|
|
385
|
-
|
|
|
386
|
-
|
|
|
387
|
-
|
|
|
388
|
-
|
|
|
389
|
-
|
|
|
390
|
-
|
|
|
391
|
-
|
|
|
392
|
-
|
|
|
393
|
-
|
|
|
394
|
-
|
|
|
395
|
-
|
|
|
396
|
-
|
|
|
397
|
-
|
|
|
398
|
-
|
|
|
399
|
-
|
|
|
400
|
-
|
|
|
401
|
-
|
|
|
402
|
-
| aria-
|
|
403
|
-
| aria-
|
|
404
|
-
| aria-
|
|
405
|
-
| aria-
|
|
406
|
-
| aria-
|
|
407
|
-
|
|
|
408
|
-
|
|
|
365
|
+
| Prop | Type | Default | Description |
|
|
366
|
+
| :--------------- | :--------------------------------------------------------------- | :---------- | :------------------------------------------------------------------------------------------------------------ |
|
|
367
|
+
| `testID` | `string` | — | Test ID for testing frameworks. On web this renders as `data-testid`; on React Native it renders as `testID`. |
|
|
368
|
+
| children | `ReactNode` | - | The button label content. |
|
|
369
|
+
| variant | `"primary" \| "secondary" \| "tertiary" \| "ghost"` | `"primary"` | The visual style variant. |
|
|
370
|
+
| tone | `"brand" \| "brandExtra" \| "alert" \| "mono"` | `"brand"` | The color tone of the button. |
|
|
371
|
+
| size | `"xl" \| "lg" \| "md" \| "sm" \| "xs"` | `"md"` | The size of the button. |
|
|
372
|
+
| disabled | `boolean` | `false` | Whether the button is disabled. |
|
|
373
|
+
| loading | `boolean` | `false` | Whether to show loading spinner. Disables interaction when true. |
|
|
374
|
+
| onPress | `() => void` | - | Callback fired when button is pressed. |
|
|
375
|
+
| iconLeft | `ReactNode` | - | Icon to display on the left side. |
|
|
376
|
+
| iconRight | `ReactNode` | - | Icon to display on the right side. |
|
|
377
|
+
| sublabel | `string` | - | Secondary label text displayed inline with main label at 40% opacity. |
|
|
378
|
+
| labelIcon | `ReactNode` | - | Small icon displayed directly next to the label text. |
|
|
379
|
+
| labelAlignment | `"left" \| "center"` | `"center"` | Alignment of the label content within the button. |
|
|
380
|
+
| customContent | `ReactNode` | - | Custom content slot for badges, tags, or other elements. |
|
|
381
|
+
| fullWidth | `boolean` | `false` | Whether button should span full container width. |
|
|
382
|
+
| type | `"button" \| "submit" \| "reset"` | `"button"` | The HTML button type attribute. |
|
|
383
|
+
| aria-label | `string` | - | Accessible label for the button. |
|
|
384
|
+
| aria-describedby | `string` | - | ID of element that describes the button. |
|
|
385
|
+
| aria-expanded | `boolean` | - | Indicates if controlled element is expanded. |
|
|
386
|
+
| aria-haspopup | `boolean \| "menu" \| "listbox" \| "tree" \| "grid" \| "dialog"` | - | Indicates popup type triggered by button. |
|
|
387
|
+
| aria-pressed | `boolean \| "mixed"` | - | Indicates pressed state for toggle buttons. |
|
|
388
|
+
| aria-controls | `string` | - | ID of element controlled by this button. |
|
|
389
|
+
| testID | `string` | - | Test identifier for testing frameworks. |
|
|
390
|
+
| id | `string` | - | HTML id attribute. |
|
|
409
391
|
|
|
410
392
|
---
|
|
411
393
|
|
|
@@ -415,17 +397,17 @@ A button variant that displays only an icon. Requires `aria-label` for accessibi
|
|
|
415
397
|
|
|
416
398
|
**IconButton Props:**
|
|
417
399
|
|
|
418
|
-
| Prop
|
|
419
|
-
|
|
|
420
|
-
| icon
|
|
421
|
-
| aria-label | `string`
|
|
422
|
-
| variant
|
|
423
|
-
| tone
|
|
424
|
-
| size
|
|
425
|
-
| disabled
|
|
426
|
-
| loading
|
|
427
|
-
| onPress
|
|
428
|
-
| type
|
|
400
|
+
| Prop | Type | Default | Description |
|
|
401
|
+
| :--------- | :-------------------------------------------------- | :---------- | :--------------------------------------------- |
|
|
402
|
+
| icon | `ReactNode` | - | **Required.** The icon to display. |
|
|
403
|
+
| aria-label | `string` | - | **Required.** Accessible label for the button. |
|
|
404
|
+
| variant | `"primary" \| "secondary" \| "tertiary" \| "ghost"` | `"primary"` | The visual style variant. |
|
|
405
|
+
| tone | `"brand" \| "brandExtra" \| "alert" \| "mono"` | `"brand"` | The color tone of the button. |
|
|
406
|
+
| size | `"xl" \| "lg" \| "md" \| "sm" \| "xs"` | `"md"` | The size of the button. |
|
|
407
|
+
| disabled | `boolean` | `false` | Whether the button is disabled. |
|
|
408
|
+
| loading | `boolean` | `false` | Whether to show loading spinner. |
|
|
409
|
+
| onPress | `() => void` | - | Callback fired when button is pressed. |
|
|
410
|
+
| type | `"button" \| "submit" \| "reset"` | `"button"` | The HTML button type attribute. |
|
|
429
411
|
|
|
430
412
|
---
|
|
431
413
|
|
|
@@ -435,18 +417,18 @@ A flexible button with more granular control over background and styling.
|
|
|
435
417
|
|
|
436
418
|
**FlexButton Props:**
|
|
437
419
|
|
|
438
|
-
| Prop
|
|
439
|
-
|
|
|
440
|
-
| children
|
|
441
|
-
| variant
|
|
442
|
-
| size
|
|
443
|
-
| background | `boolean`
|
|
444
|
-
| disabled
|
|
445
|
-
| loading
|
|
446
|
-
| iconLeft
|
|
447
|
-
| iconRight
|
|
448
|
-
| onPress
|
|
449
|
-
| type
|
|
420
|
+
| Prop | Type | Default | Description |
|
|
421
|
+
| :--------- | :------------------------------------------------------------------------------- | :--------- | :------------------------------------- |
|
|
422
|
+
| children | `ReactNode` | - | The button label content. |
|
|
423
|
+
| variant | `"brand" \| "primary" \| "secondary" \| "tertiary" \| "brandExtra" \| "inverse"` | `"brand"` | The visual style variant. |
|
|
424
|
+
| size | `"xl" \| "lg" \| "md" \| "sm" \| "xs"` | `"md"` | The size of the button. |
|
|
425
|
+
| background | `boolean` | `false` | Whether to show background fill. |
|
|
426
|
+
| disabled | `boolean` | `false` | Whether the button is disabled. |
|
|
427
|
+
| loading | `boolean` | `false` | Whether to show loading spinner. |
|
|
428
|
+
| iconLeft | `ReactNode` | - | Icon to display on the left side. |
|
|
429
|
+
| iconRight | `ReactNode` | - | Icon to display on the right side. |
|
|
430
|
+
| onPress | `() => void` | - | Callback fired when button is pressed. |
|
|
431
|
+
| type | `"button" \| "submit" \| "reset"` | `"button"` | The HTML button type attribute. |
|
|
450
432
|
|
|
451
433
|
---
|
|
452
434
|
|
|
@@ -456,29 +438,29 @@ A container for grouping related buttons together.
|
|
|
456
438
|
|
|
457
439
|
**ButtonGroup Props:**
|
|
458
440
|
|
|
459
|
-
| Prop
|
|
460
|
-
|
|
|
461
|
-
| children
|
|
462
|
-
| orientation
|
|
463
|
-
| size
|
|
464
|
-
| gap
|
|
465
|
-
| description
|
|
466
|
-
| error
|
|
467
|
-
| aria-label
|
|
468
|
-
| aria-labelledby
|
|
469
|
-
| aria-describedby | `string`
|
|
470
|
-
| id
|
|
471
|
-
| testID
|
|
441
|
+
| Prop | Type | Default | Description |
|
|
442
|
+
| :--------------- | :------------------------------------- | :------------- | :--------------------------------------------------- |
|
|
443
|
+
| children | `ReactNode` | - | **Required.** Button children to group. |
|
|
444
|
+
| orientation | `"horizontal" \| "vertical"` | `"horizontal"` | Layout direction of the buttons. |
|
|
445
|
+
| size | `"xl" \| "lg" \| "md" \| "sm" \| "xs"` | `"md"` | Size applied to the group spacing. |
|
|
446
|
+
| gap | `number` | - | Custom gap between buttons (overrides size default). |
|
|
447
|
+
| description | `string` | - | Description text shown below the group. |
|
|
448
|
+
| error | `string` | - | Error message (replaces description when present). |
|
|
449
|
+
| aria-label | `string` | - | Accessible label for the button group. |
|
|
450
|
+
| aria-labelledby | `string` | - | ID of element labeling the group. |
|
|
451
|
+
| aria-describedby | `string` | - | ID of element describing the group. |
|
|
452
|
+
| id | `string` | - | HTML id attribute. |
|
|
453
|
+
| testID | `string` | - | Test identifier for testing frameworks. |
|
|
472
454
|
|
|
473
455
|
**ButtonGroup Gap Defaults:**
|
|
474
456
|
|
|
475
457
|
| Size | Vertical Gap | Horizontal Gap |
|
|
476
458
|
| :--- | :----------- | :------------- |
|
|
477
|
-
| xl
|
|
478
|
-
| lg
|
|
479
|
-
| md
|
|
480
|
-
| sm
|
|
481
|
-
| xs
|
|
459
|
+
| xl | 16 | 16 |
|
|
460
|
+
| lg | 16 | 16 |
|
|
461
|
+
| md | 12 | 16 |
|
|
462
|
+
| sm | 8 | 12 |
|
|
463
|
+
| xs | 4 | 12 |
|
|
482
464
|
|
|
483
465
|
## Accessibility
|
|
484
466
|
|
package/native/index.js
CHANGED
|
@@ -242,6 +242,8 @@ var Text = ({
|
|
|
242
242
|
numberOfLines,
|
|
243
243
|
id,
|
|
244
244
|
role,
|
|
245
|
+
testID,
|
|
246
|
+
"data-testid": dataTestId,
|
|
245
247
|
style: styleProp,
|
|
246
248
|
...props
|
|
247
249
|
}) => {
|
|
@@ -271,7 +273,7 @@ var Text = ({
|
|
|
271
273
|
{
|
|
272
274
|
style: baseStyle,
|
|
273
275
|
numberOfLines,
|
|
274
|
-
testID: id,
|
|
276
|
+
testID: dataTestId || testID || id,
|
|
275
277
|
accessibilityRole,
|
|
276
278
|
children
|
|
277
279
|
}
|
|
@@ -313,7 +315,13 @@ Spinner.displayName = "Spinner";
|
|
|
313
315
|
var import_react = __toESM(require("react"));
|
|
314
316
|
var import_react_native4 = require("react-native");
|
|
315
317
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
316
|
-
var Icon = ({
|
|
318
|
+
var Icon = ({
|
|
319
|
+
children,
|
|
320
|
+
color,
|
|
321
|
+
size,
|
|
322
|
+
testID,
|
|
323
|
+
"data-testid": dataTestId
|
|
324
|
+
}) => {
|
|
317
325
|
const style = {
|
|
318
326
|
width: typeof size === "number" ? size : void 0,
|
|
319
327
|
height: typeof size === "number" ? size : void 0,
|
|
@@ -330,7 +338,7 @@ var Icon = ({ children, color, size }) => {
|
|
|
330
338
|
}
|
|
331
339
|
return child;
|
|
332
340
|
});
|
|
333
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style, children: childrenWithProps });
|
|
341
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style, testID: dataTestId || testID, children: childrenWithProps });
|
|
334
342
|
};
|
|
335
343
|
|
|
336
344
|
// src/Button.tsx
|