Button

Stable

Primary action button with variants, loading state, and icon support.

Installation

npm install @xaui/native

Import

import { Button, IconButton } from '@xaui/native/button'

Basic Usage

Minimal example showing the component with its default configuration.

import { Button } from '@xaui/native/button'

export function Example() {
  return <Button />
}

Variants

All available visual styles.

import { Button } from '@xaui/native/button'
import { Column } from '@xaui/native/view'

export function VariantsExample() {
  return (
    <Column gap={8}>
      <Button variant="solid">Solid</Button>
      <Button variant="bordered">Bordered</Button>
      <Button variant="flat">Flat</Button>
      <Button variant="light">Light</Button>
      <Button variant="faded">Faded</Button>
    </Column>
  )
}

Sizes

Control the button size with the size prop.

import { Button } from '@xaui/native/button'
import { Row } from '@xaui/native/view'

export function SizesExample() {
  return (
    <Row gap={8} alignItems="center">
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
    </Row>
  )
}

With Icons

Add content before or after the label using startContent / endContent.

import { Button } from '@xaui/native/button'
import { Typography } from '@xaui/native/typography'

export function WithIconsExample() {
  return (
    <Button startContent={<Typography>⬅</Typography>} endContent={<Typography>➡</Typography>}>
      Navigate
    </Button>
  )
}

Loading State

Show a spinner while an async action is in progress.

import { useState } from 'react'
import { Button } from '@xaui/native/button'

export function LoadingExample() {
  const [isLoading, setIsLoading] = useState(false)

  const handlePress = async () => {
    setIsLoading(true)
    await new Promise(resolve => setTimeout(resolve, 2000))
    setIsLoading(false)
  }

  return (
    <Button isLoading={isLoading} onPress={handlePress}>
      Submit
    </Button>
  )
}

Disabled State

Prevent interaction with isDisabled.

import { Button } from '@xaui/native/button'

export function DisabledExample() {
  return <Button isDisabled>Disabled</Button>
}

Full Width

Stretch the button to fill its container.

import { Button } from '@xaui/native/button'

export function FullWidthExample() {
  return <Button fullWidth>Full Width</Button>
}

Elevation

Add a shadow to give depth.

import { Button } from '@xaui/native/button'
import { Column } from '@xaui/native/view'

export function ElevationExample() {
  return (
    <Column gap={8}>
      <Button elevation={1}>Elevation 1</Button>
      <Button elevation={2}>Elevation 2</Button>
      <Button elevation={3}>Elevation 3</Button>
      <Button elevation={4}>Elevation 4</Button>
    </Column>
  )
}

Icon Button

A square button that holds only an icon.

import { IconButton } from '@xaui/native/button'
import { Typography } from '@xaui/native/typography'

export function IconButtonExample() {
  return <IconButton icon={<Typography>🔔</Typography>} onPress={() => {}} />
}