{"schemaVersion":"2.0.0","defaultLanguage":"en","languages":["en"],"launchScreenId":"article_screen_help-block-action-bar","screens":{"article_screen_help-block-action-bar":{"id":"article_screen_help-block-action-bar","name":"Action Bar — all settings","tags":["article"],"screenType":"FlexibleLayout","position":{"x":0,"y":0},"content":{"canvas":{"background":{"kind":"solid","content":{"color":"#F7F8FA"}},"insets":{"top":0,"end":0,"bottom":0,"start":0},"webViewBackgroundColor":"#F7F8FA"},"animated":false,"offlineFirst":true,"flexibleLayout":{"scrollable":true,"insets":{"top":44,"end":28,"bottom":56,"start":28},"sections":[{"id":"intro","order":0,"kind":"Text","label":"Intro","layout":{"heightKind":"auto"},"textContent":{"title":{"translations":{"en":"Action Bar — every setting"},"kind":"static","appearance":{"align":"start","fontSize":28,"fontWeight":800,"lineHeight":34,"color":"#101828"}},"subtitle":{"translations":{"en":"The bottom button bar — your primary call-to-action and an optional secondary button. This guide documents every setting of the Action Bar block, grouped by area. Each setting matches a real control in the screen editor."},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":400,"lineHeight":26,"color":"#475467"}}}},{"id":"section-context","order":1,"kind":"Media","label":"Action Bar in the editor","layout":{"heightKind":"fixed","heightValue":360,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-action-bar-section/0.2.0/configure-action-bar-section-2026-06-23T15-32-31-945Z-d72f9cc8/context-section.png","name":"The screen editor with the Action Bar section highlighted."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"section-context-cap","order":2,"kind":"Text","label":"Context caption","layout":{"heightKind":"auto"},"textContent":{"subtitle":{"translations":{"en":"Open the Action Bar section in the screen editor to configure its settings."},"kind":"static","appearance":{"align":"start","fontSize":13,"fontWeight":500,"lineHeight":19,"color":"#667085"}}}},{"id":"article-first-applies-to","order":3,"kind":"Text","label":"Applies to","layout":{"heightKind":"auto"},"textContent":{"title":{"translations":{"en":"Applies to: Hero Content, List Multi Pick, List Single Pick, Grid Multi Pick, Grid Single Pick, Text Input, Wheel Picker, Hero List, and Web Embed screens."},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":25,"color":"#344054"}}}},{"id":"g-primary-head","order":4,"kind":"Text","label":"Group: Primary (main) button","layout":{"heightKind":"auto","margin":{"top":40}},"textContent":{"title":{"translations":{"en":"Primary (main) button"},"kind":"static","appearance":{"align":"start","fontSize":19,"fontWeight":750,"lineHeight":26,"color":"#101828"}}}},{"id":"g-primary-el","order":5,"kind":"Media","label":"Primary (main) button in the section","layout":{"heightKind":"fixed","heightValue":270,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-action-bar-section/0.2.0/configure-action-bar-section-2026-06-23T15-32-31-945Z-d72f9cc8/open-section-primary-row.png","name":"Where the Primary (main) button sits inside the open Action Bar section."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"g-primary-el-cap","order":6,"kind":"Text","label":"Element caption","layout":{"heightKind":"auto"},"textContent":{"subtitle":{"translations":{"en":"Inside the Action Bar section, this is the Primary (main) button."},"kind":"static","appearance":{"align":"start","fontSize":13,"fontWeight":500,"lineHeight":19,"color":"#667085"}}}},{"id":"set-actionbar-primary","order":7,"kind":"Text","label":"Primary (main) button · Main button label","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Main button label"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"The text on your main call-to-action button — the one that moves visitors to the next screen. Make it a short, specific verb phrase tied to the action (Continue, Get my plan, Subscribe) rather than a generic word; clear, benefit-led labels lift click-through on a paid landing page. This text can be translated per language."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-actionbar-primary-img","order":8,"kind":"Media","label":"Main button label","layout":{"heightKind":"fixed","heightValue":188,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-action-bar-section/0.2.0/configure-action-bar-section-2026-06-23T15-32-31-945Z-d72f9cc8/open-section-primary-label.png","name":"Where to find “Main button label” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-actionbar-primary-text-styles","order":9,"kind":"Text","label":"Primary (main) button · Main button text style","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Main button text style"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Typography for the main button label — font, weight, size, color, and alignment. Leave it on the theme defaults for a consistent look; bump the weight or size, or switch color, only when the label is hard to read against the button fill. Applies to the label in every language."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-actionbar-primary-text-styles-img","order":10,"kind":"Media","label":"Main button text style","layout":{"heightKind":"fixed","heightValue":464,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-action-bar-section/0.2.0/configure-action-bar-section-2026-06-23T15-32-31-945Z-d72f9cc8/primary-style-text-styles.png","name":"Where to find “Main button text style” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-actionbar-primary-text-styles-prop-background-color","order":11,"kind":"Text","label":"Main button text style · Background color","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Background color"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Fill drawn behind the label text (a highlight pill)."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-text-styles-prop-font-family","order":12,"kind":"Text","label":"Main button text style · Font family","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Font family"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Typeface of the button label."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-text-styles-prop-line-height","order":13,"kind":"Text","label":"Main button text style · Line height","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Line height"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Vertical spacing of the label text."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-text-styles-prop-font-size","order":14,"kind":"Text","label":"Main button text style · Font size","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Font size"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Text size (px) of the label."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-text-styles-prop-font-weight","order":15,"kind":"Text","label":"Main button text style · Font weight","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Font weight"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"How bold the label is."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-text-styles-prop-text-color","order":16,"kind":"Text","label":"Main button text style · Text color","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Text color"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Color of the label text."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-text-styles-prop-text-align","order":17,"kind":"Text","label":"Main button text style · Text align","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Text align"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Alignment of the label within the button."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-text-styles-prop-strikethrough-color","order":18,"kind":"Text","label":"Main button text style · Strikethrough color","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Strikethrough color"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Color of a line-through decoration when used (for example, an old price)."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-text-styles-prop-background-opacity","order":19,"kind":"Text","label":"Main button text style · Background opacity","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Background opacity"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Transparency of the label background (0–100%)."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-text-styles-prop-background-radius","order":20,"kind":"Text","label":"Main button text style · Background radius","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Background radius"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Corner rounding of the label background."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-container","order":21,"kind":"Text","label":"Primary (main) button · Main button shape and fill","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Main button shape and fill"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Sets the main button's look — background color, border, corner radius, height, inner padding, and a full-width toggle. For an ad landing page keep it full-width and high-contrast so it reads as the obvious next step. The Visibility toggle hides the button entirely; only hide it when the screen forces a choice first, and never hide both buttons."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-actionbar-primary-container-img","order":22,"kind":"Media","label":"Main button shape and fill","layout":{"heightKind":"fixed","heightValue":619,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-action-bar-section/0.2.0/configure-action-bar-section-2026-06-23T15-32-31-945Z-d72f9cc8/primary-style-container.png","name":"Where to find “Main button shape and fill” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-actionbar-primary-container-prop-visibility","order":23,"kind":"Text","label":"Main button shape and fill · Visibility","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Visibility"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Show or hide this button entirely. Never hide both buttons, or the screen has no way forward."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-container-prop-full-width","order":24,"kind":"Text","label":"Main button shape and fill · Full width","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Full width"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Stretch the button across the whole bar. Full-width reads as the obvious next step on a phone; turn it off for a button only as wide as its label."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-container-prop-button-height","order":25,"kind":"Text","label":"Main button shape and fill · Button height","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Button height"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Fixed height of the button in pixels. Keep it tap-friendly (≈44px or taller)."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-container-prop-background-color","order":26,"kind":"Text","label":"Main button shape and fill · Background color","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Background color"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"The button fill color."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-container-prop-border-width","order":27,"kind":"Text","label":"Main button shape and fill · Border width","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Border width"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Thickness (px) of the button outline; 0 hides it."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-container-prop-border-color","order":28,"kind":"Text","label":"Main button shape and fill · Border color","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Border color"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Color of that outline."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-container-prop-corner-radius","order":29,"kind":"Text","label":"Main button shape and fill · Corner radius","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Corner radius"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"How rounded the button corners are (px); higher is softer."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-container-prop-width","order":30,"kind":"Text","label":"Main button shape and fill · Width","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Width"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Explicit button width — used when Full width is off."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-container-prop-button-padding","order":31,"kind":"Text","label":"Main button shape and fill · Button padding","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Button padding"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Inner spacing between the label/icon and the button edges (top, right, bottom, left)."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-gradient","order":32,"kind":"Text","label":"Primary (main) button · Gradient on the main button","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Gradient on the main button"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"An optional color gradient layered over the button's solid fill — set start and end colors, the angle, extra color stops, and an optional moving shimmer. Leave it off for a clean flat look; turn it on to make the call-to-action pop against a busy background. Keep enough contrast that the label stays easy to read."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-actionbar-primary-gradient-img","order":33,"kind":"Media","label":"Gradient on the main button","layout":{"heightKind":"fixed","heightValue":456,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-action-bar-section/0.2.0/configure-action-bar-section-2026-06-23T15-32-31-945Z-d72f9cc8/primary-style-gradient.png","name":"Where to find “Gradient on the main button” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-actionbar-primary-gradient-prop-enable-gradient","order":34,"kind":"Text","label":"Gradient on the main button · Enable gradient","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Enable gradient"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Off by default — the button uses a single flat color. Turn this on to blend colors across the fill for a richer look; turn it off for a clean solid button."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-gradient-prop-detail-level","order":35,"kind":"Text","label":"Gradient on the main button · Detail level","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Detail level"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"A complexity switch (not saved on its own): Simple = just a start and end color; Medium = adds a direction angle and a shimmer toggle; Advanced = multi-stop colors plus a numeric angle, size and the full shimmer controls. Pick the depth you need."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-gradient-prop-start-color","order":36,"kind":"Text","label":"Gradient on the main button · Start color","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Start color"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"The color the gradient begins with (the first color stop / left-most stop in Advanced)."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-gradient-prop-end-color","order":37,"kind":"Text","label":"Gradient on the main button · End color","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• End color"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"The color the gradient fades to (the last color stop). Keep enough contrast with the start color that the label stays readable."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-gradient-prop-angle-direction","order":38,"kind":"Text","label":"Gradient on the main button · Angle / direction","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Angle / direction"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Which way the colors flow across the button. Medium offers preset directions (e.g. 90° left→right, 180° top→bottom); Advanced lets you type any angle from 0–360°."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-gradient-prop-color-stops-advanced","order":39,"kind":"Text","label":"Gradient on the main button · Color stops (Advanced)","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Color stops (Advanced)"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"The full list of colors in the gradient. Add up to five stops and set each stop’s color and its position (0–100%) along the sweep, for multi-color blends beyond a simple two-color fade."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-gradient-prop-gradient-size-advanced","order":40,"kind":"Text","label":"Gradient on the main button · Gradient size (Advanced)","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Gradient size (Advanced)"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"How far the gradient is stretched, from 50% (tight, punchy transition) to 200% (soft, gradual spread)."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-gradient-prop-shimmer","order":41,"kind":"Text","label":"Gradient on the main button · Shimmer","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Shimmer"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"An optional animated sheen that sweeps across the button. When on you can tune the trigger (on hover, on a timer, or off), the streak color, its width and skew (slant), the duration of one sweep, and — for the timer trigger — the cycle gap between sweeps."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-shadow","order":42,"kind":"Text","label":"Primary (main) button · Shadow under the main button","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Shadow under the main button"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"An optional drop shadow beneath the button, with control over its color, blur, and vertical drop. A soft shadow lifts the call-to-action off the page so it feels tappable; keep it subtle (low blur, small offset) so it looks intentional rather than heavy. Leave it off if your theme is flat."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-actionbar-primary-shadow-img","order":43,"kind":"Media","label":"Shadow under the main button","layout":{"heightKind":"fixed","heightValue":308,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-action-bar-section/0.2.0/configure-action-bar-section-2026-06-23T15-32-31-945Z-d72f9cc8/primary-style-shadow.png","name":"Where to find “Shadow under the main button” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-actionbar-primary-shadow-prop-enable-shadow","order":44,"kind":"Text","label":"Shadow under the main button · Enable shadow","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Enable shadow"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Off by default. Turn on to cast a soft drop shadow beneath the button so it lifts off the background; off keeps it flat."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-shadow-prop-color","order":45,"kind":"Text","label":"Shadow under the main button · Color","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Color"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"The shadow color, including its transparency (default is a semi-transparent black). A tinted, low-opacity color gives a subtle lift."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-shadow-prop-blur","order":46,"kind":"Text","label":"Shadow under the main button · Blur","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Blur"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"How soft and spread-out the shadow is, from 0 (hard edge) to 50 (very diffuse)."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-shadow-prop-vertical-offset","order":47,"kind":"Text","label":"Shadow under the main button · Vertical offset","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Vertical offset"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"How far the shadow sits below (positive) or above (negative) the button, −50 to 50 px."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-effects","order":48,"kind":"Text","label":"Primary (main) button · Motion on the main button","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Motion on the main button"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Optional animation for the call-to-action — pulse, glow, bounce, scale, fade-in, slide-up and more, plus an opacity control. A gentle pulse or glow can draw the eye and lift taps; save attention-grabbing effects for your key conversion screen and avoid stacking several. Leave it off for a calm, professional feel."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-actionbar-primary-effects-img","order":49,"kind":"Media","label":"Motion on the main button","layout":{"heightKind":"fixed","heightValue":329,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-action-bar-section/0.2.0/configure-action-bar-section-2026-06-23T15-32-31-945Z-d72f9cc8/primary-style-effects.png","name":"Where to find “Motion on the main button” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-actionbar-primary-effects-prop-enable-effects","order":50,"kind":"Text","label":"Motion on the main button · Enable effects","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Enable effects"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Off by default (gated on opacity). Turning it on sets the button to full opacity and a default Shimmer animation, then reveals the opacity slider and animation menu. (The animation choice is remembered but inactive while effects are off.)"},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-effects-prop-opacity","order":51,"kind":"Text","label":"Motion on the main button · Opacity","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Opacity"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"How see-through the whole button is, from 0% (invisible) to 100% (solid)."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-effects-prop-animation","order":52,"kind":"Text","label":"Motion on the main button · Animation","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Animation"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"An optional looping motion to draw the eye to the action — choose from None, Pulse, Shimmer, Bounce, Shake, Glow, Ripple, Scale, Fade In, Slide Up or Wiggle."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-icon","order":53,"kind":"Text","label":"Primary (main) button · Icon on the main button","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Icon on the main button"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"An optional icon next to the label — choose start or end placement, size, corner radius, and spacing, and how it fits its box (fit shows the whole icon, fill crops to cover). A small leading arrow or lock icon can reinforce the action; keep it in the same color family as the label. Leave it empty for a clean text-only button."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-actionbar-primary-icon-img","order":54,"kind":"Media","label":"Icon on the main button","layout":{"heightKind":"fixed","heightValue":516,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-action-bar-section/0.2.0/configure-action-bar-section-2026-06-23T15-32-31-945Z-d72f9cc8/primary-style-icon.png","name":"Where to find “Icon on the main button” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-actionbar-primary-icon-prop-enable-icon","order":55,"kind":"Text","label":"Icon on the main button · Enable icon","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Enable icon"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Off by default. Turn on to show an image (icon) alongside the button label; off for a text-only button."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-icon-prop-icon-image","order":56,"kind":"Text","label":"Icon on the main button · Icon image","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Icon image"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Upload an image file or paste an image URL — the icon shown next to the label. Leave empty to show no graphic."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-icon-prop-placement","order":57,"kind":"Text","label":"Icon on the main button · Placement","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Placement"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Where the icon sits relative to the label: Start (before the text) or End (after it); the Fixed Start/End variants pin it to the button’s left/right edge; Top and Bottom stack it above or below the label."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-icon-prop-scale-mode","order":58,"kind":"Text","label":"Icon on the main button · Scale mode","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Scale mode"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"How the image fits its box: Scale to Fill (stretch), Aspect Fit (show the whole icon, may letterbox), Aspect Fill (cover the box, may crop), or Center (no resize)."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-icon-prop-width","order":59,"kind":"Text","label":"Icon on the main button · Width","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Width"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"The icon’s width in pixels (0–200)."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-icon-prop-height","order":60,"kind":"Text","label":"Icon on the main button · Height","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Height"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"The icon’s height in pixels (0–200)."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-icon-prop-corner-radius","order":61,"kind":"Text","label":"Icon on the main button · Corner radius","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Corner radius"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Rounding of the icon’s corners in pixels; raise it to clip a square image into a rounded or circular badge."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-primary-icon-prop-icon-padding","order":62,"kind":"Text","label":"Icon on the main button · Icon padding","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Icon padding"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"The space around the icon (top, right, bottom, left) — the gap between the icon and the label and the button edges."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"g-secondary-head","order":63,"kind":"Text","label":"Group: Secondary button","layout":{"heightKind":"auto","margin":{"top":40}},"textContent":{"title":{"translations":{"en":"Secondary button"},"kind":"static","appearance":{"align":"start","fontSize":19,"fontWeight":750,"lineHeight":26,"color":"#101828"}}}},{"id":"g-secondary-el","order":64,"kind":"Media","label":"Secondary button in the section","layout":{"heightKind":"fixed","heightValue":270,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-action-bar-section/0.2.0/configure-action-bar-section-2026-06-23T15-32-31-945Z-d72f9cc8/open-section-secondary-row.png","name":"Where the Secondary button sits inside the open Action Bar section."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"g-secondary-el-cap","order":65,"kind":"Text","label":"Element caption","layout":{"heightKind":"auto"},"textContent":{"subtitle":{"translations":{"en":"Inside the Action Bar section, this is the Secondary button."},"kind":"static","appearance":{"align":"start","fontSize":13,"fontWeight":500,"lineHeight":19,"color":"#667085"}}}},{"id":"set-actionbar-secondary","order":66,"kind":"Text","label":"Secondary button · Secondary button label","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Secondary button label"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Text for the optional second button — use it for a side path like Skip, Maybe later, or Restore purchase, never your main goal. On funnel steps an easy escape route can cost conversions, so leave it empty unless you genuinely need the alternative; on a paywall a low-key secondary is fine."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-actionbar-secondary-img","order":67,"kind":"Media","label":"Secondary button label","layout":{"heightKind":"fixed","heightValue":188,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-action-bar-section/0.2.0/configure-action-bar-section-2026-06-23T15-32-31-945Z-d72f9cc8/open-section-secondary-label.png","name":"Where to find “Secondary button label” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-actionbar-secondary-text-styles","order":68,"kind":"Text","label":"Secondary button · Secondary button text style","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Secondary button text style"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Typography for the secondary button label — font, weight, size, color, and alignment. Style it deliberately quieter than the main button (lighter weight, muted color) so your primary call-to-action stays the obvious choice. Leave it on theme defaults unless the hierarchy looks off."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-actionbar-secondary-text-styles-img","order":69,"kind":"Media","label":"Secondary button text style","layout":{"heightKind":"fixed","heightValue":464,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-action-bar-section/0.2.0/configure-action-bar-section-2026-06-23T15-32-31-945Z-d72f9cc8/secondary-style-text-styles.png","name":"Where to find “Secondary button text style” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-actionbar-secondary-text-styles-prop-background-color","order":70,"kind":"Text","label":"Secondary button text style · Background color","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Background color"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Fill drawn behind the label text (a highlight pill)."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-text-styles-prop-font-family","order":71,"kind":"Text","label":"Secondary button text style · Font family","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Font family"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Typeface of the button label."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-text-styles-prop-line-height","order":72,"kind":"Text","label":"Secondary button text style · Line height","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Line height"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Vertical spacing of the label text."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-text-styles-prop-font-size","order":73,"kind":"Text","label":"Secondary button text style · Font size","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Font size"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Text size (px) of the label."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-text-styles-prop-font-weight","order":74,"kind":"Text","label":"Secondary button text style · Font weight","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Font weight"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"How bold the label is."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-text-styles-prop-text-color","order":75,"kind":"Text","label":"Secondary button text style · Text color","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Text color"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Color of the label text."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-text-styles-prop-text-align","order":76,"kind":"Text","label":"Secondary button text style · Text align","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Text align"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Alignment of the label within the button."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-text-styles-prop-strikethrough-color","order":77,"kind":"Text","label":"Secondary button text style · Strikethrough color","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Strikethrough color"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Color of a line-through decoration when used (for example, an old price)."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-text-styles-prop-background-opacity","order":78,"kind":"Text","label":"Secondary button text style · Background opacity","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Background opacity"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Transparency of the label background (0–100%)."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-text-styles-prop-background-radius","order":79,"kind":"Text","label":"Secondary button text style · Background radius","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Background radius"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Corner rounding of the label background."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-container","order":80,"kind":"Text","label":"Secondary button · Secondary button shape and fill","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Secondary button shape and fill"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Sets the secondary button's look — background, border, corner radius, height, padding, and a full-width toggle. Give it lower visual weight than the main button (an outline or transparent fill works well) so it doesn't compete with your call-to-action. The Visibility toggle hides it; never hide both the primary and secondary buttons."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-actionbar-secondary-container-img","order":81,"kind":"Media","label":"Secondary button shape and fill","layout":{"heightKind":"fixed","heightValue":619,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-action-bar-section/0.2.0/configure-action-bar-section-2026-06-23T15-32-31-945Z-d72f9cc8/secondary-style-container.png","name":"Where to find “Secondary button shape and fill” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-actionbar-secondary-container-prop-visibility","order":82,"kind":"Text","label":"Secondary button shape and fill · Visibility","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Visibility"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Show or hide this button entirely. Never hide both buttons, or the screen has no way forward."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-container-prop-full-width","order":83,"kind":"Text","label":"Secondary button shape and fill · Full width","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Full width"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Stretch the button across the whole bar. Full-width reads as the obvious next step on a phone; turn it off for a button only as wide as its label."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-container-prop-button-height","order":84,"kind":"Text","label":"Secondary button shape and fill · Button height","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Button height"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Fixed height of the button in pixels. Keep it tap-friendly (≈44px or taller)."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-container-prop-background-color","order":85,"kind":"Text","label":"Secondary button shape and fill · Background color","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Background color"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"The button fill color."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-container-prop-border-width","order":86,"kind":"Text","label":"Secondary button shape and fill · Border width","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Border width"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Thickness (px) of the button outline; 0 hides it."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-container-prop-border-color","order":87,"kind":"Text","label":"Secondary button shape and fill · Border color","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Border color"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Color of that outline."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-container-prop-corner-radius","order":88,"kind":"Text","label":"Secondary button shape and fill · Corner radius","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Corner radius"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"How rounded the button corners are (px); higher is softer."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-container-prop-width","order":89,"kind":"Text","label":"Secondary button shape and fill · Width","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Width"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Explicit button width — used when Full width is off."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-container-prop-button-padding","order":90,"kind":"Text","label":"Secondary button shape and fill · Button padding","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Button padding"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Inner spacing between the label/icon and the button edges (top, right, bottom, left)."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-gradient","order":91,"kind":"Text","label":"Secondary button · Gradient on the secondary button","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Gradient on the secondary button"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"An optional color gradient over the secondary button's solid fill (start/end colors, angle, stops, optional shimmer). Usually leave this off — a gradient draws attention, which you want on your main call-to-action, not the side path. Turn it on only if a flat secondary clashes with your theme."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-actionbar-secondary-gradient-img","order":92,"kind":"Media","label":"Gradient on the secondary button","layout":{"heightKind":"fixed","heightValue":297,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-action-bar-section/0.2.0/configure-action-bar-section-2026-06-23T15-32-31-945Z-d72f9cc8/secondary-style-gradient.png","name":"Where to find “Gradient on the secondary button” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-actionbar-secondary-gradient-prop-enable-gradient","order":93,"kind":"Text","label":"Gradient on the secondary button · Enable gradient","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Enable gradient"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Off by default — the button uses a single flat color. Turn this on to blend colors across the fill for a richer look; turn it off for a clean solid button."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-gradient-prop-detail-level","order":94,"kind":"Text","label":"Gradient on the secondary button · Detail level","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Detail level"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"A complexity switch (not saved on its own): Simple = just a start and end color; Medium = adds a direction angle and a shimmer toggle; Advanced = multi-stop colors plus a numeric angle, size and the full shimmer controls. Pick the depth you need."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-gradient-prop-start-color","order":95,"kind":"Text","label":"Gradient on the secondary button · Start color","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Start color"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"The color the gradient begins with (the first color stop / left-most stop in Advanced)."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-gradient-prop-end-color","order":96,"kind":"Text","label":"Gradient on the secondary button · End color","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• End color"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"The color the gradient fades to (the last color stop). Keep enough contrast with the start color that the label stays readable."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-gradient-prop-angle-direction","order":97,"kind":"Text","label":"Gradient on the secondary button · Angle / direction","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Angle / direction"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Which way the colors flow across the button. Medium offers preset directions (e.g. 90° left→right, 180° top→bottom); Advanced lets you type any angle from 0–360°."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-gradient-prop-color-stops-advanced","order":98,"kind":"Text","label":"Gradient on the secondary button · Color stops (Advanced)","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Color stops (Advanced)"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"The full list of colors in the gradient. Add up to five stops and set each stop’s color and its position (0–100%) along the sweep, for multi-color blends beyond a simple two-color fade."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-gradient-prop-gradient-size-advanced","order":99,"kind":"Text","label":"Gradient on the secondary button · Gradient size (Advanced)","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Gradient size (Advanced)"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"How far the gradient is stretched, from 50% (tight, punchy transition) to 200% (soft, gradual spread)."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-gradient-prop-shimmer","order":100,"kind":"Text","label":"Gradient on the secondary button · Shimmer","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Shimmer"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"An optional animated sheen that sweeps across the button. When on you can tune the trigger (on hover, on a timer, or off), the streak color, its width and skew (slant), the duration of one sweep, and — for the timer trigger — the cycle gap between sweeps."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-shadow","order":101,"kind":"Text","label":"Secondary button · Shadow under the secondary button","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Shadow under the secondary button"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"An optional drop shadow under the secondary button (color, blur, vertical drop). Keep it lighter than the main button's shadow, or off entirely, so the secondary stays visually subordinate to your call-to-action."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-actionbar-secondary-shadow-img","order":102,"kind":"Media","label":"Shadow under the secondary button","layout":{"heightKind":"fixed","heightValue":403,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-action-bar-section/0.2.0/configure-action-bar-section-2026-06-23T15-32-31-945Z-d72f9cc8/secondary-style-shadow.png","name":"Where to find “Shadow under the secondary button” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-actionbar-secondary-shadow-prop-enable-shadow","order":103,"kind":"Text","label":"Shadow under the secondary button · Enable shadow","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Enable shadow"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Off by default. Turn on to cast a soft drop shadow beneath the button so it lifts off the background; off keeps it flat."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-shadow-prop-color","order":104,"kind":"Text","label":"Shadow under the secondary button · Color","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Color"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"The shadow color, including its transparency (default is a semi-transparent black). A tinted, low-opacity color gives a subtle lift."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-shadow-prop-blur","order":105,"kind":"Text","label":"Shadow under the secondary button · Blur","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Blur"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"How soft and spread-out the shadow is, from 0 (hard edge) to 50 (very diffuse)."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-shadow-prop-vertical-offset","order":106,"kind":"Text","label":"Shadow under the secondary button · Vertical offset","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Vertical offset"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"How far the shadow sits below (positive) or above (negative) the button, −50 to 50 px."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-effects","order":107,"kind":"Text","label":"Secondary button · Motion on the secondary button","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Motion on the secondary button"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Adds optional movement to the secondary (lower-priority) button, such as pulse, glow, or bounce, plus an opacity control to fade it. Leave this off by default. Animation draws the eye, so reserve it for your main button only; making the alternative path move competes with your primary call to action and typically lowers conversions."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-actionbar-secondary-effects-img","order":108,"kind":"Media","label":"Motion on the secondary button","layout":{"heightKind":"fixed","heightValue":329,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-action-bar-section/0.2.0/configure-action-bar-section-2026-06-23T15-32-31-945Z-d72f9cc8/secondary-style-effects.png","name":"Where to find “Motion on the secondary button” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-actionbar-secondary-effects-prop-enable-effects","order":109,"kind":"Text","label":"Motion on the secondary button · Enable effects","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Enable effects"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Off by default (gated on opacity). Turning it on sets the button to full opacity and a default Shimmer animation, then reveals the opacity slider and animation menu. (The animation choice is remembered but inactive while effects are off.)"},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-effects-prop-opacity","order":110,"kind":"Text","label":"Motion on the secondary button · Opacity","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Opacity"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"How see-through the whole button is, from 0% (invisible) to 100% (solid)."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-effects-prop-animation","order":111,"kind":"Text","label":"Motion on the secondary button · Animation","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Animation"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"An optional looping motion to draw the eye to the action — choose from None, Pulse, Shimmer, Bounce, Shake, Glow, Ripple, Scale, Fade In, Slide Up or Wiggle."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-icon","order":112,"kind":"Text","label":"Secondary button · Icon on the secondary button","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Icon on the secondary button"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"An optional icon on the secondary button — placement (start or end), size, corner radius, spacing, and how it fits its box (fit shows the whole icon, fill crops to cover). Usually leave it empty so the secondary stays understated; add one only when it clarifies the action, like a back arrow for Go back."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-actionbar-secondary-icon-img","order":113,"kind":"Media","label":"Icon on the secondary button","layout":{"heightKind":"fixed","heightValue":516,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-action-bar-section/0.2.0/configure-action-bar-section-2026-06-23T15-32-31-945Z-d72f9cc8/secondary-style-icon.png","name":"Where to find “Icon on the secondary button” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-actionbar-secondary-icon-prop-enable-icon","order":114,"kind":"Text","label":"Icon on the secondary button · Enable icon","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Enable icon"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Off by default. Turn on to show an image (icon) alongside the button label; off for a text-only button."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-icon-prop-icon-image","order":115,"kind":"Text","label":"Icon on the secondary button · Icon image","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Icon image"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Upload an image file or paste an image URL — the icon shown next to the label. Leave empty to show no graphic."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-icon-prop-placement","order":116,"kind":"Text","label":"Icon on the secondary button · Placement","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Placement"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Where the icon sits relative to the label: Start (before the text) or End (after it); the Fixed Start/End variants pin it to the button’s left/right edge; Top and Bottom stack it above or below the label."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-icon-prop-scale-mode","order":117,"kind":"Text","label":"Icon on the secondary button · Scale mode","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Scale mode"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"How the image fits its box: Scale to Fill (stretch), Aspect Fit (show the whole icon, may letterbox), Aspect Fill (cover the box, may crop), or Center (no resize)."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-icon-prop-width","order":118,"kind":"Text","label":"Icon on the secondary button · Width","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Width"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"The icon’s width in pixels (0–200)."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-icon-prop-height","order":119,"kind":"Text","label":"Icon on the secondary button · Height","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Height"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"The icon’s height in pixels (0–200)."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-icon-prop-corner-radius","order":120,"kind":"Text","label":"Icon on the secondary button · Corner radius","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Corner radius"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Rounding of the icon’s corners in pixels; raise it to clip a square image into a rounded or circular badge."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-actionbar-secondary-icon-prop-icon-padding","order":121,"kind":"Text","label":"Icon on the secondary button · Icon padding","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Icon padding"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"The space around the icon (top, right, bottom, left) — the gap between the icon and the label and the button edges."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}}]}}}},"metadata":{"kind":"article","alias":"help-block-action-bar","articlePresentation":{"version":1,"profiles":{"standard":{"containerMaxWidth":640,"contentInsets":{"top":44,"end":28,"bottom":56,"start":28},"sectionPaddingScale":1,"textScale":1},"laptop":{"containerMaxWidth":620,"contentInsets":{"top":40,"end":28,"bottom":52,"start":28},"sectionPaddingScale":0.98,"textScale":0.98},"tablet":{"containerMaxWidth":560,"contentInsets":{"top":36,"end":24,"bottom":44,"start":24},"sectionPaddingScale":0.94,"textScale":0.95},"phone":{"containerMaxWidth":"100%","contentInsets":{"top":28,"end":16,"bottom":36,"start":16},"sectionPaddingScale":0.86,"textScale":0.9,"titleTextScale":0.86}}},"settingsMap":[{"fieldKey":"primary","title":"Main button label","sectionType":"actionBar","group":"primary","guideKey":"screenedit-action-bar-primary-label","editorTestId":"input-action-bar-primary-button","revealState":"open-section","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-action-bar-section/0.2.0/configure-action-bar-section-2026-06-23T15-32-31-945Z-d72f9cc8/open-section-primary-label.png","articleSectionId":"set-actionbar-primary","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Expand the Action Bar section.","postconditionTestId":"section-action-bar"},{"to":"control","humanInstruction":"Find “Main button label”.","postconditionTestId":"input-action-bar-primary-button"}]},{"fieldKey":"primary-text-styles","title":"Main button text style","sectionType":"actionBar","group":"primary","guideKey":"screenedit-action-bar-primary-text-styles","editorTestId":"styles-group-action-bar-primary-button","revealState":"primary-style","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-action-bar-section/0.2.0/configure-action-bar-section-2026-06-23T15-32-31-945Z-d72f9cc8/primary-style-text-styles.png","articleSectionId":"set-actionbar-primary-text-styles","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Expand the Action Bar section.","postconditionTestId":"section-action-bar"},{"to":"panel","humanInstruction":"Open the primary button style settings (the gear on the primary button row).","postconditionTestId":"button-style-section-container"},{"to":"control","humanInstruction":"Find “Main button text style”.","postconditionTestId":"styles-group-action-bar-primary-button"}]},{"fieldKey":"primary-container","title":"Main button shape and fill","sectionType":"actionBar","group":"primary","guideKey":"screenedit-action-bar-primary-container","editorTestId":"button-style-section-container","revealState":"primary-style","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-action-bar-section/0.2.0/configure-action-bar-section-2026-06-23T15-32-31-945Z-d72f9cc8/primary-style-container.png","articleSectionId":"set-actionbar-primary-container","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Expand the Action Bar section.","postconditionTestId":"section-action-bar"},{"to":"panel","humanInstruction":"Open the primary button style settings (the gear on the primary button row).","postconditionTestId":"button-style-section-container"},{"to":"control","humanInstruction":"Find “Main button shape and fill”.","postconditionTestId":"button-style-section-container"}]},{"fieldKey":"primary-gradient","title":"Gradient on the main button","sectionType":"actionBar","group":"primary","guideKey":"screenedit-action-bar-primary-gradient","editorTestId":"button-style-section-gradient","revealState":"primary-style","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-action-bar-section/0.2.0/configure-action-bar-section-2026-06-23T15-32-31-945Z-d72f9cc8/primary-style-gradient.png","articleSectionId":"set-actionbar-primary-gradient","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Expand the Action Bar section.","postconditionTestId":"section-action-bar"},{"to":"panel","humanInstruction":"Open the primary button style settings (the gear on the primary button row).","postconditionTestId":"button-style-section-container"},{"to":"control","humanInstruction":"Find “Gradient on the main button”.","postconditionTestId":"button-style-section-gradient"}]},{"fieldKey":"primary-shadow","title":"Shadow under the main button","sectionType":"actionBar","group":"primary","guideKey":"screenedit-action-bar-primary-shadow","editorTestId":"button-style-section-shadow","revealState":"primary-style","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-action-bar-section/0.2.0/configure-action-bar-section-2026-06-23T15-32-31-945Z-d72f9cc8/primary-style-shadow.png","articleSectionId":"set-actionbar-primary-shadow","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Expand the Action Bar section.","postconditionTestId":"section-action-bar"},{"to":"panel","humanInstruction":"Open the primary button style settings (the gear on the primary button row).","postconditionTestId":"button-style-section-container"},{"to":"control","humanInstruction":"Find “Shadow under the main button”.","postconditionTestId":"button-style-section-shadow"}]},{"fieldKey":"primary-effects","title":"Motion on the main button","sectionType":"actionBar","group":"primary","guideKey":"screenedit-action-bar-primary-effects","editorTestId":"button-style-section-effects","revealState":"primary-style","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-action-bar-section/0.2.0/configure-action-bar-section-2026-06-23T15-32-31-945Z-d72f9cc8/primary-style-effects.png","articleSectionId":"set-actionbar-primary-effects","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Expand the Action Bar section.","postconditionTestId":"section-action-bar"},{"to":"panel","humanInstruction":"Open the primary button style settings (the gear on the primary button row).","postconditionTestId":"button-style-section-container"},{"to":"control","humanInstruction":"Find “Motion on the main button”.","postconditionTestId":"button-style-section-effects"}]},{"fieldKey":"primary-icon","title":"Icon on the main button","sectionType":"actionBar","group":"primary","guideKey":"screenedit-action-bar-primary-icon","editorTestId":"button-style-section-icon","revealState":"primary-style","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-action-bar-section/0.2.0/configure-action-bar-section-2026-06-23T15-32-31-945Z-d72f9cc8/primary-style-icon.png","articleSectionId":"set-actionbar-primary-icon","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Expand the Action Bar section.","postconditionTestId":"section-action-bar"},{"to":"panel","humanInstruction":"Open the primary button style settings (the gear on the primary button row).","postconditionTestId":"button-style-section-container"},{"to":"control","humanInstruction":"Find “Icon on the main button”.","postconditionTestId":"button-style-section-icon"}]},{"fieldKey":"secondary","title":"Secondary button label","sectionType":"actionBar","group":"secondary","guideKey":"screenedit-action-bar-secondary-label","editorTestId":"input-action-bar-secondary-button","revealState":"open-section","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-action-bar-section/0.2.0/configure-action-bar-section-2026-06-23T15-32-31-945Z-d72f9cc8/open-section-secondary-label.png","articleSectionId":"set-actionbar-secondary","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Expand the Action Bar section.","postconditionTestId":"section-action-bar"},{"to":"control","humanInstruction":"Find “Secondary button label”.","postconditionTestId":"input-action-bar-secondary-button"}]},{"fieldKey":"secondary-text-styles","title":"Secondary button text style","sectionType":"actionBar","group":"secondary","guideKey":"screenedit-action-bar-secondary-text-styles","editorTestId":"styles-group-action-bar-secondary-button","revealState":"secondary-style","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-action-bar-section/0.2.0/configure-action-bar-section-2026-06-23T15-32-31-945Z-d72f9cc8/secondary-style-text-styles.png","articleSectionId":"set-actionbar-secondary-text-styles","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Expand the Action Bar section.","postconditionTestId":"section-action-bar"},{"to":"panel","humanInstruction":"Open the secondary button style settings (the gear on the secondary button row).","postconditionTestId":"button-style-section-container"},{"to":"control","humanInstruction":"Find “Secondary button text style”.","postconditionTestId":"styles-group-action-bar-secondary-button"}]},{"fieldKey":"secondary-container","title":"Secondary button shape and fill","sectionType":"actionBar","group":"secondary","guideKey":"screenedit-action-bar-secondary-container","editorTestId":"button-style-section-container","revealState":"secondary-style","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-action-bar-section/0.2.0/configure-action-bar-section-2026-06-23T15-32-31-945Z-d72f9cc8/secondary-style-container.png","articleSectionId":"set-actionbar-secondary-container","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Expand the Action Bar section.","postconditionTestId":"section-action-bar"},{"to":"panel","humanInstruction":"Open the secondary button style settings (the gear on the secondary button row).","postconditionTestId":"button-style-section-container"},{"to":"control","humanInstruction":"Find “Secondary button shape and fill”.","postconditionTestId":"button-style-section-container"}]},{"fieldKey":"secondary-gradient","title":"Gradient on the secondary button","sectionType":"actionBar","group":"secondary","guideKey":"screenedit-action-bar-secondary-gradient","editorTestId":"button-style-section-gradient","revealState":"secondary-style","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-action-bar-section/0.2.0/configure-action-bar-section-2026-06-23T15-32-31-945Z-d72f9cc8/secondary-style-gradient.png","articleSectionId":"set-actionbar-secondary-gradient","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Expand the Action Bar section.","postconditionTestId":"section-action-bar"},{"to":"panel","humanInstruction":"Open the secondary button style settings (the gear on the secondary button row).","postconditionTestId":"button-style-section-container"},{"to":"control","humanInstruction":"Find “Gradient on the secondary button”.","postconditionTestId":"button-style-section-gradient"}]},{"fieldKey":"secondary-shadow","title":"Shadow under the secondary button","sectionType":"actionBar","group":"secondary","guideKey":"screenedit-action-bar-secondary-shadow","editorTestId":"button-style-section-shadow","revealState":"secondary-style","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-action-bar-section/0.2.0/configure-action-bar-section-2026-06-23T15-32-31-945Z-d72f9cc8/secondary-style-shadow.png","articleSectionId":"set-actionbar-secondary-shadow","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Expand the Action Bar section.","postconditionTestId":"section-action-bar"},{"to":"panel","humanInstruction":"Open the secondary button style settings (the gear on the secondary button row).","postconditionTestId":"button-style-section-container"},{"to":"control","humanInstruction":"Find “Shadow under the secondary button”.","postconditionTestId":"button-style-section-shadow"}]},{"fieldKey":"secondary-effects","title":"Motion on the secondary button","sectionType":"actionBar","group":"secondary","guideKey":"screenedit-action-bar-secondary-effects","editorTestId":"button-style-section-effects","revealState":"secondary-style","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-action-bar-section/0.2.0/configure-action-bar-section-2026-06-23T15-32-31-945Z-d72f9cc8/secondary-style-effects.png","articleSectionId":"set-actionbar-secondary-effects","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Expand the Action Bar section.","postconditionTestId":"section-action-bar"},{"to":"panel","humanInstruction":"Open the secondary button style settings (the gear on the secondary button row).","postconditionTestId":"button-style-section-container"},{"to":"control","humanInstruction":"Find “Motion on the secondary button”.","postconditionTestId":"button-style-section-effects"}]},{"fieldKey":"secondary-icon","title":"Icon on the secondary button","sectionType":"actionBar","group":"secondary","guideKey":"screenedit-action-bar-secondary-icon","editorTestId":"button-style-section-icon","revealState":"secondary-style","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-action-bar-section/0.2.0/configure-action-bar-section-2026-06-23T15-32-31-945Z-d72f9cc8/secondary-style-icon.png","articleSectionId":"set-actionbar-secondary-icon","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Expand the Action Bar section.","postconditionTestId":"section-action-bar"},{"to":"panel","humanInstruction":"Open the secondary button style settings (the gear on the secondary button row).","postconditionTestId":"button-style-section-container"},{"to":"control","humanInstruction":"Find “Icon on the secondary button”.","postconditionTestId":"button-style-section-icon"}]}],"projectId":"arswew63RwQr6V4Ekb1Z","articleId":"help-block-action-bar"},"webViewDefaultBackgroundColor":"#F7F8FA","projectAnalytics":{"consentManagement":{"enabled":true,"bannerText":"We use cookies to improve your experience and analyze site usage.","privacyPolicyUrl":"","defaultConsent":"denied"},"integrations":[{"platform":"segmently_internal","name":"Segmently Analytics","enabled":true,"config":{"mode":"http"},"createdAt":"2026-05-26T13:53:00.398Z","updatedAt":"2026-05-26T13:53:00.398Z","id":"int_mpmp3jsm_aij2kz"}]}}