Button

Button is a versatile, theme-aware button component built on top of react-native-gesture-handler's Pressable. It supports multiple visual variants, types, sizes, and optional leading/trailing icons. The component automatically handles RTL layout by swapping icon positions.

Usage

import { Button } from "stream-chat-react-native";

<Button
  variant="primary"
  type="solid"
  size="md"
  label="Send Message"
  onPress={() => console.log("pressed")}
/>;

With icons:

<Button
  variant="secondary"
  type="outline"
  size="lg"
  label="Attach"
  LeadingIcon={(props) => <AttachIcon {...props} />}
/>

Icon-only button:

<Button
  variant="primary"
  type="ghost"
  size="sm"
  iconOnly
  LeadingIcon={(props) => <SendIcon {...props} />}
/>

Props

Button extends PressableProps from react-native-gesture-handler, so all pressable props (like onPress, onLongPress, hitSlop, etc.) are supported.

variant (required)

The color variant of the button. Determines the color scheme applied to the button's background, text, and border.

type (required)

The visual style type of the button.

size

The size of the button. Controls height, width (for icon-only), and horizontal padding.

Size mapping:

label

The content displayed at the center of the button. Can be a string (rendered as styled Text) or a custom React node.

LeadingIcon

A render function for the icon displayed on the leading side (left in LTR, right in RTL) of the button.

TrailingIcon

A render function for the icon displayed on the trailing side (right in LTR, left in RTL) of the button.

iconOnly

When true, the button renders only the leading icon without a label. Padding is removed and the button becomes a square based on the size prop.

selected

Whether the button is in a selected/active state. When true, the button uses the backgroundCoreSelected semantic token for its background.

disabled

Whether the button is disabled. Passed through to the underlying Pressable.

style

Additional style applied to the outer wrapper View.