Text & Buttons
Add text content and interactive buttons to your screens.
Text & Buttons
Text and button components are the foundation of every in-app experience. Use text to communicate with users, and buttons to drive actions like navigation, dismissal, or opening URLs.
Text
The Text component displays styled text content on a screen. It is the most commonly used component and supports rich formatting and dynamic content through variable bindings.
Properties
| Property | Type | Description |
|---|---|---|
| Text Content | textarea | The text to display. Supports {{variable}} syntax for dynamic content. |
| Font Size | number | Size in points (8-128). Default: 16. |
| Font Family | font | Typeface selection. Default: Inter. |
| Font Weight | select | Weight from thin to black. Default: regular. |
| Text Color | color | Text color in hex or rgba. Default: #000000. |
| Text Alignment | select | Left, center, or right alignment. Default: left. |
| Line Height | number | Line spacing multiplier. |
| Letter Spacing | number | Spacing between characters. |
| Width | size | Component width. Can be a pixel value, percentage, or "auto". |
| Padding | spacing | Internal spacing (top, right, bottom, left). |
| Margin | spacing | External spacing (top, right, bottom, left). |
Variable bindings
Text content supports variable bindings using double-curly-brace syntax. You can insert user attributes or event properties directly into your text:
Welcome back, {{user.firstName}}!
You have {{user.credits}} credits remaining.When the bound data is unavailable, the fallback value you configure is displayed instead.
Localization
The Text Content property is localizable. When you add translations for a screen, each text component can have its content overridden per language. See Localization for details.
Button
The Button component is the primary interactive element in Setgreet flows. Buttons trigger actions — navigating between screens, dismissing a flow, opening a URL, or requesting system permissions.
Variants
| Variant | Use case |
|---|---|
| Primary | Main call-to-action. Bold, filled background. |
| Secondary | Alternative action alongside a primary button. |
| Text | Low-emphasis action. No background, text only. |
| Success | Positive confirmation actions. |
| Danger | Destructive or warning actions. |
Sizes
Buttons support four sizes: Tiny, Small, Medium (default), and Large. The Full Width option stretches the button to fill its container.
Actions
Every button has an action that fires when tapped:
| Action | Description |
|---|---|
| Next | Navigate to the next screen in the flow. |
| Previous | Navigate back to the previous screen. |
| Skip | Skip the current flow entirely. |
| Dismiss | Close the flow. |
| URL | Open an external URL in the device browser. |
| Request Notification Permission | Trigger the native notification permission dialog. |
| Request Location Permission | Trigger the native location permission dialog. |
| Request Camera Permission | Trigger the native camera permission dialog. |
| Request Review | Prompt the native app store review dialog. |
| Share | Open the native share sheet. |
| Open Settings | Open the device settings page for the app. |
| Track Event | Fire a custom analytics event. |
| Custom | Pass custom data to your app via SDK callback. |
Appearance properties
| Property | Type | Description |
|---|---|---|
| Background Color | color | Button fill color. |
| Text Color | color | Label text color. |
| Font Family | font | Typeface for the label. |
| Font Weight | select | Label font weight. |
| Border Radius | number | Corner rounding in pixels. |
| Border Width | number | Border stroke width. |
| Border Color | color | Border stroke color. |
| Icon | icon | Optional icon displayed alongside the label. |
| Icon Position | select | Left or right of the label text. |
Button labels are localizable. When you add a new language to a screen, you can provide translated button text for each locale.
Branching
Buttons support conditional branching. When multiple buttons are placed on a screen, each can route to a different next screen based on which one the user taps. This is configured in the flow graph editor by creating branch nodes.