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 small label for status, categories, or emphasis. Use badges to mark something as new, highlight a plan tier, or flag a state.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Badge Text | text | New | The label shown inside the badge. |
| Variant | select | default | default, success, warning, error, info, or outline. |
| Size | select | medium | small, medium, or large. |
| Icon | icon | -- | Optional icon shown next to the text. |
| Background Color | color | -- | Overrides the variant's background. |
| Text Color | color | -- | Overrides the variant's text color. |
| Border Radius | number | 9999 | Corner rounding. The default gives a pill shape. |
| Margin | spacing | 0 | External spacing. |
Reach for a variant before overriding colors. The six variants carry consistent meaning across a flow, and they adapt to the app's theme.
Tooltip
A small popup that explains an element without taking up permanent space on the screen.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Tooltip Content | textarea | Tooltip text | The text shown inside the tooltip. |
| Trigger | select | hover | hover or click. On a device, use click: there is no hover. |
| Position | select | top | Where the tooltip sits: top, bottom, left, or right. |
| Max Width | number | 200 | Maximum width before the text wraps. |
| Background Color | color | #1F2937 | Tooltip background. |
| Text Color | color | #FFFFFF | Tooltip text color. |
| Border Radius | number | 6 | Corner rounding. |
| Show Delay (ms) | number | 200 | Delay before the tooltip appears. |
Trigger defaults to hover, which has no equivalent on a touchscreen. Set it to click for flows that run on a
device.
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 | Default | Description |
|---|---|---|---|
| URL | text | -- | The web page to load. |
| Width | size | 100% | Component width. |
| Height | size | 300 | Component height. |
| Allow Scrolling | boolean | true | Whether the embedded page can scroll independently. |
| Border Radius | number | 0 | Corner rounding. |
| Margin | spacing | bottom 16 | External spacing. |
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 grouped container with a background, padding, and a shadow. Use cards to separate a block of content from the rest of the screen.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Background Color | color | #FFFFFF | Card background. |
| Padding | spacing | 24 | Inner spacing on all sides. |
| Margin | spacing | bottom 16 | External spacing. |
| Border Radius | number | 12 | Corner rounding. |
| Border | border | -- | Width, style, and color as one control. |
| Shadow | shadow | soft drop | Offset, blur, spread, and color. |
| On Click | action | -- | Makes the whole card tappable. |
A card with an On Click action is tappable on iOS and Android, so it works as a large touch target for a choice.
Divider
A line that separates sections of content.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Orientation | select | horizontal | horizontal or vertical. |
| Style | select | solid | solid, dashed, or dotted. |
| Color | color | #E5E7EB | Line color. |
| Thickness | number | 1 | Line thickness in pixels. |
| Margin | spacing | top/bottom 16 | External spacing. |
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 | Default | Description |
|---|---|---|---|
| Fill Space | boolean | true | Expand to fill the available space, pushing later components down. |
| Height | number | 24 | Fixed height in pixels. Used when Fill Space is off. |
Layout behavior
Fill Space is on by default, so a new spacer expands rather than holding a fixed 24px gap. That default is what pins a call to action to the bottom of a screen: put a spacer above the button and it pushes the button down. Turn Fill Space off when you want a fixed gap between two elements.
Fill Space only expands on screens using the default fitScreen layout. On a scrollable screen the root hugs its content, so there is no leftover space to fill and the spacer falls back to its fixed height.
Modal Trigger
An element that opens another screen in a modal overlay on top of the current one. Use it for content a user may want but should not be forced through: terms, a plan comparison, a "how it works" explainer. The user reads it and returns to where they were, without leaving the step.
The trigger itself can render as a button, a text link, an icon, or an image. Only the properties for the selected Trigger Type apply.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Trigger Type | select | button | How the trigger renders: button, link, icon, or image. |
| Button Label | text | Open Modal | Text on the trigger when Trigger Type is button. |
| Link Text | text | Click here | Text on the trigger when Trigger Type is link. |
| Icon | icon | -- | Icon used when Trigger Type is icon. |
| Image | image | -- | Image used when Trigger Type is image. |
| Target Screen ID | text | -- | Required. The screen rendered inside the modal. |
| Modal Size | select | medium | small (80%), medium (90%), large (95%), or fullscreen. |
| Position | select | center | Where the modal sits: center, top, or bottom. |
| Button Variant | select | primary | primary, secondary, outline, or ghost. Applies to button triggers. |
| Overlay Color | color | #00000080 | Scrim drawn over the screen behind the modal. |
| Modal Background | color | #FFFFFF | Modal fill. |
| Modal Border Radius | borderRadius | 16 | Corner rounding of the modal. |
| Modal Shadow | shadow | soft drop | Offset, blur, spread, and color. |
| Animation | select | fade | How the modal appears: none, fade, slide-up, slide-down, or scale. |
| Close on Overlay Click | boolean | true | Dismiss the modal when the user taps the scrim. |
| Show Close Button | boolean | true | Display a close control inside the modal. |
| Close on Escape Key | boolean | true | Dismiss on the escape key, where a keyboard is present. |
| On Open | action | -- | Action fired when the modal opens. |
| On Close | action | -- | Action fired when the modal closes. |
| Trigger Margin | spacing | 0 | External spacing around the trigger element, not the modal. |
Modal Trigger's animation is a plain string select controlling how the modal enters: none, fade, slide-up,
slide-down, or scale. It is not the object-valued animation property found on other components, which carries
preset, duration, delay, easing, and trigger. Setting an animation object here will not work.
Target Screen ID is required and points at a screen in the same flow. The modal renders that screen's components, so build the modal content as a normal screen first, then reference it.