Button

Component Button is an interactive button that can contain text, icons, and a loading indicator.

Anatomy

Import all parts and piece them together.

import { Button } from '@xsolla-zk/react'
 
export default () => (
  <Button>
    <Button.Icon />
    <Button.Text />
    <Button.Icon />
  </Button>
)

Examples

Basic example

import { Button } from '@xsolla-zk/react'
 
function App() {
  return (
    <Button>
      <Button.Text>Press me</Button.Text>
    </Button>
  )
}

All Sizes

Buttons support different sizes based on the components design system tokens:

All Tones

Buttons support different tones based on the components theme config:

All Variants

API

Button Props

Buttons extend Stack views inheriting all the Tamagui standard props , plus:

Button.Text Props

Component for displaying text inside the button.

Button.Icon Props

Component for displaying an icon inside the button.

Accessibility

• Supports keyboard navigation
• Works correctly with screen readers
• Automatically manages the disabled state when loading