@xsolla/xui-button 0.206.2 → 0.207.0

package/README.md

@@ -255,6 +255,45 @@ export default function ButtonGroupExample() {
 }
 ```
 
+### Split Button Group
+
+A horizontal group picks its layout from the child count: 3 or more buttons use
+the split (`space-between`) layout — first button pinned to the left edge, the
+rest grouped on the right — while 1–2 buttons stretch to fill the row.
+
+Pass `split` to override that heuristic in either direction. It is the usual
+choice for a wizard footer, where Back belongs on the left and Next on the
+right. `split` has no effect on vertical groups or on a single button.
+
+```tsx
+import * as React from "react";
+import { Button, ButtonGroup } from "@xsolla/xui-button";
+import { ArrowRight } from "@xsolla/xui-icons-base";
+
+export default function SplitButtonGroup() {
+  return (
+    <>
+      {/* Two buttons, split apart instead of stretched */}
+      <ButtonGroup split aria-label="Wizard navigation">
+        <Button variant="secondary" tone="mono">
+          Back
+        </Button>
+        <Button iconRight={<ArrowRight />}>Next</Button>
+      </ButtonGroup>
+
+      {/* Three buttons kept together instead of split */}
+      <ButtonGroup split={false} aria-label="Grouped actions">
+        <Button variant="secondary" tone="mono">
+          Cancel
+        </Button>
+        <Button variant="secondary">Save Draft</Button>
+        <Button>Submit</Button>
+      </ButtonGroup>
+    </>
+  );
+}
+```
+
 ### Vertical Button Group
 
 ```tsx
@@ -516,6 +555,7 @@ A container for grouping related buttons together.
 | :--------------- | :------------------------------------- | :------------- | :--------------------------------------------------- |
 | children         | `ReactNode`                            | -              | **Required.** Button children to group.              |
 | orientation      | `"horizontal" \| "vertical"`           | `"horizontal"` | Layout direction of the buttons.                     |
+| split            | `boolean`                              | -              | Force or suppress the split space-between layout.    |
 | size             | `"xl" \| "lg" \| "md" \| "sm" \| "xs"` | `"md"`         | Size applied to the group spacing.                   |
 | gap              | `number`                               | -              | Custom gap between buttons (overrides size default). |
 | description      | `string`                               | -              | Description text shown below the group.              |
@@ -526,6 +566,12 @@ A container for grouping related buttons together.
 | id               | `string`                               | -              | HTML id attribute.                                   |
 | testID           | `string`                               | -              | Test identifier for testing frameworks.              |
 
+`split` overrides the child-count heuristic that otherwise decides the
+horizontal layout. Pass `split` to give a 2-button group the space-between
+layout (the buttons keep their natural width rather than stretching to fill the
+row), or `split={false}` to keep a 3+ button group together. It is ignored when
+`orientation="vertical"` or when the group has fewer than 2 children.
+
 **ButtonGroup Gap Defaults:**
 
 | Size | Vertical Gap | Horizontal Gap |

package/native/index.d.mts

@@ -318,6 +318,23 @@ interface ButtonGroupProps extends ThemeOverrideProps {
      * @default 'horizontal'
      */
     orientation?: "horizontal" | "vertical";
+    /**
+     * Force or suppress the split ("space-between") layout, in which the first
+     * button is pinned to the left edge and the remaining buttons are grouped
+     * on the right.
+     *
+     * When omitted, the layout is chosen by child count: horizontal groups with
+     * 3 or more buttons split, smaller groups do not. Set `split` to override
+     * that heuristic in either direction:
+     *
+     * - `split` — split a 2-button group (buttons keep their natural width
+     *   instead of stretching to fill the row)
+     * - `split={false}` — opt a 3+ button group out of the split layout
+     *
+     * Has no effect when `orientation="vertical"` or when the group has fewer
+     * than 2 children.
+     */
+    split?: boolean;
     /**
      * Size of the button group, determines default gap between buttons
      * @default 'md'

package/native/index.d.ts

@@ -318,6 +318,23 @@ interface ButtonGroupProps extends ThemeOverrideProps {
      * @default 'horizontal'
      */
     orientation?: "horizontal" | "vertical";
+    /**
+     * Force or suppress the split ("space-between") layout, in which the first
+     * button is pinned to the left edge and the remaining buttons are grouped
+     * on the right.
+     *
+     * When omitted, the layout is chosen by child count: horizontal groups with
+     * 3 or more buttons split, smaller groups do not. Set `split` to override
+     * that heuristic in either direction:
+     *
+     * - `split` — split a 2-button group (buttons keep their natural width
+     *   instead of stretching to fill the row)
+     * - `split={false}` — opt a 3+ button group out of the split layout
+     *
+     * Has no effect when `orientation="vertical"` or when the group has fewer
+     * than 2 children.
+     */
+    split?: boolean;
     /**
      * Size of the button group, determines default gap between buttons
      * @default 'md'

package/native/index.js

@@ -1485,6 +1485,7 @@ var import_xui_core5 = require("@xsolla/xui-core");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var ButtonGroup = ({
   orientation = "horizontal",
+  split,
   size = "md",
   children,
   description,
@@ -1512,7 +1513,7 @@ var ButtonGroup = ({
   };
   const flatChildren = flattenChildren(children);
   const childCount = flatChildren.length;
-  const useSpaceBetween = orientation === "horizontal" && childCount > 2;
+  const useSpaceBetween = orientation === "horizontal" && childCount > 1 && (split ?? childCount > 2);
   const verticalGapMap = {
     xl: 16,
     lg: 16,
@@ -1535,7 +1536,7 @@ var ButtonGroup = ({
     error && errorId ? errorId : void 0,
     description && descriptionId ? descriptionId : void 0
   ].filter(Boolean).join(" ") || void 0;
-  const stretchChildren = orientation === "vertical" || orientation === "horizontal" && childCount <= 2;
+  const stretchChildren = orientation === "vertical" || orientation === "horizontal" && childCount <= 2 && !useSpaceBetween;
   const processChildren = (childrenToProcess) => {
     if (stretchChildren) {
       return childrenToProcess.map((child, index) => {