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 shown next to the label, chosen from the built-in icon set. |
| Icon Position | select | Left or right of the label text. |
Icons
Pick a button icon from the built-in icon set in the property panel. Each icon renders natively on every platform, so the same choice looks right on iOS and Android, and it tints to match your label color. The set covers the icons onboarding and call-to-action buttons use most: navigation arrows and chevrons, common actions (check, close, plus, share, download, search, settings), status and marketing glyphs (star, heart, bell, gift, sparkles, lock, shield, bolt), media and contact icons (play, pause, mail, camera, calendar), and the Apple and Google marks for sign-in buttons. Use Icon Position to place the icon to the left or right of the label.
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.