Styling Components
Customize the visual appearance of every component.
Styling Components
Every component in Setgreet supports a comprehensive set of styling properties. You configure these in the properties panel when a component is selected in the flow builder. Styles are applied per-component, giving you precise control over the visual appearance of every element.
Colors
Color properties accept hex values (e.g., #FF5733) or rgba values (e.g., rgba(255, 87, 51, 0.8)) for transparency control.
| Property | Available on | Description |
|---|---|---|
| Background Color | Most components | Fill color behind the component content. |
| Text Color | Text, Button, Badge, Segmented Control, Stepper, Tooltip | Color of text content. |
| Border Color | Most components | Stroke color of the component border. |
| Active Color | Rating, Progress Indicator | Color for the active or selected state. NPS uses three band colors instead. |
| Inactive Color | Rating, Progress Indicator | Color for the inactive or unselected state. |
Opacity
The Image and Container components have an opacity property, set from 0 to 100. An opacity of 0 is fully transparent and 100 is fully opaque. This is independent of any alpha channel in color values. For other components, use a color with an alpha channel instead.
Typography
The full typography set (font, size, weight, line height, letter spacing, decoration, transform) belongs to the Text and Button components. Other components that show text expose narrower controls: Badge has a size select rather than a font size, and most inputs style their labels through their own color properties.
| Property | Type | Description |
|---|---|---|
| Font Family | font picker | Select from available typefaces. Default: Inter. The font picker includes common web and system fonts. |
| Font Size | number | Size in points. Range: 8-128. |
| Font Weight | fontWeight | Stored numerically from 100 (Thin) to 900 (Black). Text defaults to 400, Button to 600. |
| Line Height | number | Multiplier that controls vertical spacing between lines. |
| Letter Spacing | number | Additional horizontal spacing between characters in pixels. |
| Text Alignment | select | Left, center, or right alignment of text within its container. |
| Text Decoration | select | none, underline, or line-through. |
| Text Transform | select | None, uppercase, lowercase, capitalize. |
Fonts are rendered using the native platform type system. If a specified font is not available on a device, the platform falls back to the default system font.
Borders
Border properties create visual outlines around components.
| Property | Type | Description |
|---|---|---|
| Border | border | Width, style, and color, set together as one control. Available on Container, Card, and Image. |
| Border Radius | borderRadius | Corner rounding in pixels. A high value creates pill or circle shapes. |
Border radius applies to all four corners together. The only per-corner control in Setgreet is on the bottom sheet presentation style, which has separate top-left and top-right radius values.
Note that Button and Badge have a border radius but no border, so you cannot outline them with a stroke.
Spacing
Spacing properties control the internal and external whitespace around a component. Setgreet uses a four-sided spacing model.
Padding
Internal spacing between the component boundary and its content. Defined as four values: top, right, bottom, left.
Example: a button with padding: { top: 12, right: 24, bottom: 12, left: 24 } has more horizontal breathing room than vertical.
Margin
External spacing between the component boundary and its siblings. Also defined as four values: top, right, bottom, left.
Margins create separation between adjacent components in the layout flow. Use margin instead of padding when you want space outside the component's visible boundary.
Shadows
Shadow properties add depth by rendering a drop shadow beneath a component. Shadows are available on Card, Container, Button, and Image.
| Property | Type | Description |
|---|---|---|
| Offset X | number | Horizontal shadow displacement in pixels. |
| Offset Y | number | Vertical shadow displacement in pixels. |
| Blur Radius | number | How much the shadow is blurred. Higher values create softer shadows. |
| Spread | number | How far the shadow extends beyond the component boundary. |
| Color | color | Shadow color (typically a semi-transparent black like rgba(0,0,0,0.15)). |
Shadows are rendered natively on both platforms and respect the component's border radius for accurate shadow shapes.
Visibility
Components can be conditionally shown or hidden based on user data.
Static visibility
The visible property (boolean) controls whether a component is rendered at all. Set it to false to hide a component without removing it from the screen definition. Hidden components do not take up layout space.
Conditional visibility
Components support visibility conditions that evaluate at runtime based on user attributes or event properties. A component with conditions is only rendered when its conditions are met.
| Condition field | Description |
|---|---|
| Source | userAttribute or eventProperty |
| Field | The attribute or property key to evaluate (e.g., plan, country). |
| Operator | equals, notEquals, contains, greaterThan, lessThan, exists, notExists. |
| Value | The comparison value. |
Multiple conditions can be combined to create precise targeting rules for individual components within a screen.
Use cases
- Show a "Pro" badge only to users on the Pro plan
- Display a discount banner only for users in a specific country
- Hide an advanced feature explanation for new users