@xsolla/xui-button

v0.103.0

Published

5 hours ago

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.

0High
0Medium
0Low

admins-xsolla

Button

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.

Installation

npm install @xsolla/xui-button
# or
yarn add @xsolla/xui-button

Demo

Basic Button

import * as React from 'react';
import { Button } from '@xsolla/xui-button';

export default function BasicButton() {
  return (
    <Button onPress={() => console.log('Pressed!')}>
      Click me
    </Button>
  );
}

Button Variants

import * as React from 'react';
import { Button } from '@xsolla/xui-button';

export default function ButtonVariants() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="tertiary">Tertiary</Button>
    </div>
  );
}

Button Tones

import * as React from 'react';
import { Button } from '@xsolla/xui-button';

export default function ButtonTones() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Button tone="brand">Brand</Button>
      <Button tone="brandExtra">Brand Extra</Button>
      <Button tone="alert">Alert</Button>
      <Button tone="mono">Mono</Button>
    </div>
  );
}

Button Sizes

import * as React from 'react';
import { Button } from '@xsolla/xui-button';

export default function ButtonSizes() {
  return (
    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
      <Button size="xs">Extra Small</Button>
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
      <Button size="xl">Extra Large</Button>
    </div>
  );
}

Button with Icons

import * as React from 'react';
import { Button } from '@xsolla/xui-button';
import { Plus, ChevronDown, FileDownloadOut } from '@xsolla/xui-icons-base';
import { ArrowRight } from '@xsolla/xui-icons';

export default function ButtonWithIcons() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Button iconLeft={<Plus />}>
        Add Item
      </Button>
      <Button iconRight={<ArrowRight />}>
        Next Step
      </Button>
      <Button
        iconLeft={<FileDownloadOut />}
        iconRight={<ChevronDown />}
      >
        Download
      </Button>
    </div>
  );
}

Loading Button

import * as React from 'react';
import { Button } from '@xsolla/xui-button';

export default function LoadingButton() {
  const [loading, setLoading] = React.useState(false);

  const handlePress = () => {
    setLoading(true);
    setTimeout(() => setLoading(false), 2000);
  };

  return (
    <Button loading={loading} onPress={handlePress}>
      {loading ? 'Processing...' : 'Submit'}
    </Button>
  );
}

Anatomy

Import the component and use it directly:

import { Button, IconButton, FlexButton, ButtonGroup } from '@xsolla/xui-button';
import { Plus } from '@xsolla/xui-icons-base';

// Basic button
<Button>Label</Button>

// Icon-only button
<IconButton icon={<Plus />} aria-label="Add item" />

// Flexible styling button
<FlexButton variant="brand">Label</FlexButton>

// Group of buttons
<ButtonGroup>
  <Button>First</Button>
  <Button>Second</Button>
</ButtonGroup>

Examples

Full Width Button

Use the fullWidth prop to make the button span the entire container width.

import * as React from 'react';
import { Button } from '@xsolla/xui-button';

export default function FullWidthButton() {
  return (
    <div style={{ width: 300 }}>
      <Button fullWidth>Full Width Button</Button>
    </div>
  );
}

Disabled Button

import * as React from 'react';
import { Button } from '@xsolla/xui-button';

export default function DisabledButton() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Button disabled>Disabled Primary</Button>
      <Button variant="secondary" disabled>Disabled Secondary</Button>
    </div>
  );
}

Icon Button

Use IconButton for buttons that contain only an icon.

import * as React from 'react';
import { IconButton } from '@xsolla/xui-button';
import { Plus, TrashCan } from '@xsolla/xui-icons-base';
import { Settings } from '@xsolla/xui-icons';

export default function IconButtonExample() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <IconButton
        icon={<Plus />}
        aria-label="Add"
        size="md"
      />
      <IconButton
        icon={<TrashCan />}
        aria-label="Delete"
        tone="alert"
      />
      <IconButton
        icon={<Settings />}
        aria-label="Settings"
        variant="secondary"
      />
    </div>
  );
}

Button Group

Use ButtonGroup to group related buttons together.

import * as React from 'react';
import { Button, ButtonGroup } from '@xsolla/xui-button';

export default function ButtonGroupExample() {
  return (
    <ButtonGroup orientation="horizontal" size="md">
      <Button variant="secondary">Cancel</Button>
      <Button>Confirm</Button>
    </ButtonGroup>
  );
}

Vertical Button Group

import * as React from 'react';
import { Button, ButtonGroup } from '@xsolla/xui-button';

export default function VerticalButtonGroup() {
  return (
    <ButtonGroup orientation="vertical" size="md">
      <Button fullWidth>Option 1</Button>
      <Button fullWidth>Option 2</Button>
      <Button fullWidth>Option 3</Button>
    </ButtonGroup>
  );
}

Flex Button

FlexButton provides more flexible styling options with different background modes.

import * as React from 'react';
import { FlexButton } from '@xsolla/xui-button';
import { Link } from '@xsolla/xui-icons-base';

export default function FlexButtonExample() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <FlexButton variant="brand" background>
        With Background
      </FlexButton>
      <FlexButton variant="brand">
        Text Only
      </FlexButton>
      <FlexButton variant="tertiary" iconLeft={<Link />}>
        Link Style
      </FlexButton>
    </div>
  );
}

Form Submit Button

import * as React from 'react';
import { Button } from '@xsolla/xui-button';

export default function FormSubmitButton() {
  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      console.log('Form submitted');
    }}>
      <Button type="submit">Submit Form</Button>
    </form>
  );
}

Button with Sublabel

Use the sublabel prop to add secondary text inline with the main label.

import * as React from 'react';
import { Button } from '@xsolla/xui-button';
import { Apple } from '@xsolla/xui-icons-brand';

export default function ButtonWithSublabel() {
  return (
    <Button 
      iconLeft={<Apple />}
      sublabel="$39.99"
      labelAlignment="left"
    >
      Buy Now
    </Button>
  );
}

Button with Divider

The divider prop controls whether a separator line appears between icons and content.

import * as React from 'react';
import { Button } from '@xsolla/xui-button';
import { ArrowRight } from '@xsolla/xui-icons-base';

export default function ButtonWithDivider() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Button iconRight={<ArrowRight />} divider>
        With Divider
      </Button>
      <Button iconRight={<ArrowRight />} divider={false}>
        No Divider
      </Button>
    </div>
  );
}

Button with Custom Content

Use customContent to add badges, tags, or other elements inside the button.

import * as React from 'react';
import { Button } from '@xsolla/xui-button';
import { Tag } from '@xsolla/xui-tag';
import { ArrowRight } from '@xsolla/xui-icons-base';

export default function ButtonWithCustomContent() {
  return (
    <Button 
      iconRight={<ArrowRight />}
      customContent={<Tag size="sm">5x</Tag>}
      divider
    >
      Claim Reward
    </Button>
  );
}

Tertiary Variant

The tertiary variant provides a minimal, text-like button style.

import * as React from 'react';
import { Button, IconButton } from '@xsolla/xui-button';
import { Settings } from '@xsolla/xui-icons-base';

export default function TertiaryButtons() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Button variant="tertiary">Learn More</Button>
      <IconButton 
        variant="tertiary" 
        icon={<Settings />} 
        aria-label="Settings"
      />
    </div>
  );
}

API Reference

Button

The main button component. Renders a semantic <button> element.

Button Props:

IconButton

A button variant that displays only an icon. Requires aria-label for accessibility.

IconButton Props:

FlexButton

A flexible button with more granular control over background and styling.

FlexButton Props:

ButtonGroup

A container for grouping related buttons together.

ButtonGroup Props:

ButtonGroup Gap Defaults:

| Size | Vertical Gap | Horizontal Gap | | :--- | :----------- | :------------- | | xl | 16 | 16 | | lg | 16 | 16 | | md | 12 | 16 | | sm | 8 | 12 | | xs | 4 | 12 |

Theming

Button components use the design system theme for colors and sizing:

// Colors accessed via theme
theme.colors.control.[tone].[variant].bg      // Background color
theme.colors.control.[tone].[variant].bgHover // Hover background
theme.colors.control.[tone].[variant].bgPress // Pressed background
theme.colors.control.[tone].[variant].text    // Text color
theme.colors.control.[tone].[variant].border  // Border color

// Sizing accessed via theme
theme.sizing.button(size).height
theme.sizing.button(size).paddingHorizontal
theme.sizing.button(size).fontSize
theme.sizing.button(size).iconSize

// Border radius
theme.radius.button

Accessibility

All buttons use semantic <button> elements
IconButton requires aria-label for screen reader support
ButtonGroup uses role="group" with proper ARIA attributes
Focus indicators follow WCAG guidelines
Disabled buttons are properly announced to assistive technology
Loading state is communicated via aria-busy attribute

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Button

Installation

Demo

Basic Button

Button Variants

Button Tones

Button Sizes

Button with Icons

Loading Button

Anatomy

Examples

Full Width Button

Disabled Button

Icon Button

Button Group

Vertical Button Group

Flex Button

Form Submit Button

Button with Sublabel

Button with Divider

Button with Custom Content

Tertiary Variant

API Reference

Button

IconButton

FlexButton

ButtonGroup

Theming

Accessibility