Display Components
Add badges, tooltips, cards, and other display elements.
Display Components
Display components provide supporting visual elements that enhance your screens without requiring user interaction. Use them to add labels, contextual hints, embedded web content, visual grouping, and spacing.
Badge
A compact label element for highlighting status, categories, or tags. Badges are commonly used to draw attention to new features, labels, or metadata.
Properties
| Property | Type | Description |
|---|---|---|
| Text | text | The badge label text. Localizable. |
| Background Color | color | Badge fill color. |
| Text Color | color | Label text color. |
| Font Size | number | Label font size. |
| Font Weight | select | Label font weight. |
| Border Radius | number | Corner rounding. Default: fully rounded (pill shape). |
| Padding | spacing | Internal spacing. |
| Border Width | number | Optional border stroke width. |
| Border Color | color | Border stroke color. |
Use cases
- "NEW" or "BETA" labels on feature announcements
- Category tags in onboarding topic selectors
- Status indicators ("Pro", "Free Trial", "Recommended")
Tooltip
A contextual hint component that displays explanatory text near a target element. Tooltips help users understand what a feature does or why something is being shown.
Properties
| Property | Type | Description |
|---|---|---|
| Text | text | Tooltip content text. Localizable. |
| Background Color | color | Tooltip background. |
| Text Color | color | Tooltip text color. |
| Arrow Position | select | Where the arrow points: top, bottom, left, right. |
| Font Size | number | Text size. |
| Border Radius | number | Corner rounding. |
| Max Width | number | Maximum tooltip width before text wraps. |
| Padding | spacing | Internal spacing. |
WebView
An embedded web content component that renders a URL within your flow screen. WebView is useful for displaying terms of service, privacy policies, external forms, or any web-based content that does not need to be rebuilt natively.
Properties
| Property | Type | Description |
|---|---|---|
| URL | url | The web page to load. |
| Width | size | Component width. |
| Height | size | Component height. |
| Allow Scrolling | boolean | Whether the embedded page can scroll independently. |
| Show Loading | boolean | Display a loading indicator while the page loads. |
WebView content is rendered inside a platform webview, unlike all other Setgreet components which are fully native. Use WebView sparingly and only when native components cannot achieve the desired result.
Card
A container component with visual styling — background, border, and shadow — that groups related content together. Cards provide a clear visual boundary around a set of components.
Properties
| Property | Type | Description |
|---|---|---|
| Background Color | color | Card fill color. |
| Border Radius | number | Corner rounding. |
| Border Width | number | Border stroke width. |
| Border Color | color | Border stroke color. |
| Shadow | shadow | Box shadow configuration (offset, blur, spread, color). |
| Padding | spacing | Internal spacing around child components. |
| Margin | spacing | External spacing. |
| Width | size | Card width. |
Cards can contain any other components as children, making them a versatile way to visually group text, images, buttons, and input elements.
Divider
A horizontal line that visually separates sections of content within a screen.
Properties
| Property | Type | Description |
|---|---|---|
| Color | color | Line color. Default: light gray. |
| Thickness | number | Line height in pixels. Default: 1. |
| Width | size | Line width. Default: 100%. |
| Margin | spacing | Spacing above and below the divider. |
| Opacity | number | Line transparency (0 to 1). |
Spacer
A flexible spacing element that creates vertical or horizontal gaps between components. Spacers are essential for controlling layout when you need precise spacing that padding and margin alone cannot achieve.
Properties
| Property | Type | Description |
|---|---|---|
| Height | size | Fixed height in pixels, or "auto". |
| Fill Space | boolean | When enabled, the spacer expands to fill available space. Useful for pushing content to the bottom of the screen. |
Layout behavior
A spacer with fillSpace enabled expands to push subsequent components toward the bottom of the screen. This is how you create layouts where buttons are pinned to the bottom.