# 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

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

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

With icons:

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

Icon-only button:

```tsx
<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.

| 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>`                                   |


---

This page was last updated at 2026-04-17T17:33:46.645Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/ui-components/base-ui/button/](https://getstream.io/chat/docs/sdk/react-native/ui-components/base-ui/button/).