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, SendRight } 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) => <SendRight {...props} />}
/>

Props

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

Prop Description Type
variant (required) The color variant of the button. Determines the color scheme applied to the button's background, text, and border. 'primary' | 'secondary' | 'destructive'
type (required) The visual style type of the button. 'solid': filled background with accent color, 'outline': transparent background with a visible border, 'ghost': no background or border (text/icon only), 'liquidGlass': translucent glass-like background. 'solid' | 'outline' | 'ghost' | 'liquidGlass'
size The size of the button. Controls height, width (for icon-only), and horizontal padding. Size mapping: 'sm' (32px), 'md' (40px), 'lg' (48px). Defaults to 'md'. 'sm' | 'md' | 'lg'
label The content displayed at the center of the button. Can be a string (rendered as styled Text) or a custom React node. ReactNode
LeadingIcon A render function for the icon displayed on the leading side (left in LTR, right in RTL) of the button. (props: IconProps) => ReactNode
TrailingIcon A render function for the icon displayed on the trailing side (right in LTR, left in RTL) of the button. (props: IconProps) => ReactNode
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. Defaults to false. boolean
selected Whether the button is in a selected/active state. When true, the button uses the backgroundCoreSelected semantic token for its background. Defaults to false. boolean
disabled Whether the button is disabled. Passed through to the underlying Pressable. Defaults to false. boolean
style Additional style applied to the outer wrapper View. StyleProp<ViewStyle>
accessibilityLabelKey Translation key used to resolve the button's accessibility label via the SDK's i18n layer. string
accessibilityLabelParams Optional interpolation params passed to accessibilityLabelKey when resolving the translated label. Record<string, unknown>
Add Chat to my app: getstream.io/SKILL.md

The fastest way to build with Stream. Start a new project or improve an existing one. Full CLI and documentation integration out of the box.


Ask your agent:

/stream Build me a Social App with Feeds and Moderation.
/stream Any livestream calls running?
/stream Chat React Native v9: <Your Question>