(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Vertical Tab Footer

Overview

The Dynamic Vertical Tab Panel Footer is a footer area for vertical tab panels.
It renders dynamic child elements such as buttons and text from the elements array.
It supports two layout directions to arrange content: vertical or horizontal.
It lets you control spacing with CSS padding classes via paddingClass.
It can act as a guided tour hotspot with a title and description for onboarding.

Example vertical Tab

Specs

Tokens

Token	Description
elements	Child dynamic elements rendered in the footer.
layout	Layout direction for elements: `vertical` or `horizontal`.
paddingClass	CSS padding classes applied to the footer.
gapClass	Configures spacing between child elements (row/column gaps).
displayName	Display name shown in the structure panel.
id	Unique identifier for the footer component.
dataTestId	Testing hook ID for automated tests.
enableAsHotspot	Enables the footer as a guided tour hotspot.
guidedTourHotSpotTitle	Title for the guided tour hotspot (supports translations).
guidedTourHotSpotDescription	Description for the guided tour hotspot (supports translations).

Structure

(Configured in Visual Properties)

elements - Defines the child dynamic elements rendered in the footer. You can add buttons, text, or any supported dynamic component.
Example:

  [
    { "type": "DynamicButtonComponent", "props": { "label": "Save" } },
    { "type": "DynamicTextComponent", "props": { "text": "All changes saved." } }
  ]

(Configured in General Properties)

id - Specifies a unique identifier for the footer component.
displayName - Sets the display name of the footer, shown in the structure panel.

Labled Footer

Styling

(Configured in Visual Properties)

layout - Sets the layout direction for footer elements. Use "vertical" to stack elements or "horizontal" to arrange them side by side.
paddingClass - Applies CSS padding classes to the footer for spacing. For example, p-3 adds medium padding.
gapClass - Configures the spacing between child elements within the section. For example, {"row": "row-gap-4", "column": "column-gap-2"} creates consistent spacing between elements with more vertical than horizontal spacing.

Testing

(Configured in Testing hooks)

dataTestId - Sets a testing hook ID for automated tests. For example, set the value to upw-vertical-tab-footer so automated scripts can reliably target this component.
enableAsHotspot - Enables the footer as a guided tour hotspot. For example, set to true to highlight the footer during onboarding.
guidedTourHotSpotTitle - Sets the title for the guided tour hotspot, supporting translations.
Example: json { "en-US": "Footer Actions" }
guidedTourHotSpotDescription - Sets the description for the guided tour hotspot, supporting translations.
Example: json { "en-US": "Use these buttons to save or cancel changes." }

Links

Figma:
Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/other-components/vertical-tab-panel

Guidelines

Usage

Surface concise actions or short status text beneath a vertical tab panel by adding only the required child components in elements.
Opt in to guided onboarding by enabling the hotspot with localized copy via enableAsHotspot, guidedTourHotSpotTitle, and guidedTourHotSpotDescription.
Keep footer content minimal; avoid complex layouts or long text. Use brief button labels and short status text via elements.

Sizing & Layout

Choose arrangement with layout: use "horizontal" for 1–2 compact items; switch to "vertical" for 3+ items or longer labels.
Control intra-footer spacing with gapClass (row/column gaps) rather than spacer children.
Apply inset with paddingClass to create comfortable breathing room around the footer content.
Express priority by ordering children in elements (e.g., primary action first, then secondary, then helper text).
Set an author-friendly name for quick identification during build-time using displayName.

Data-Driven / Conditional Behavior

Reflect progress or completion by swapping or reordering children in elements (e.g., replace “Save” button with “Saved” text) while keeping layout and gapClass stable.

Content & Localization

Localize hotspot copy and keep it brief and action-oriented using guidedTourHotSpotTitle and guidedTourHotSpotDescription.
displayName is authoring-only and not user-facing.

Dos & Don’ts

Do	Don’t	Article setting(s)
Stack 3+ items or long labels with `layout: "vertical"` to avoid wrap collisions.	Force 3–4 actions into a single row that wraps unpredictably.	`layout`
Use `gapClass` to create consistent row/column spacing between children.	Insert empty spacer elements to fake spacing.	`gapClass`, `elements`
Add inset with `paddingClass` to improve touch/scan comfort.	Leave zero padding so actions hug edges.	`paddingClass`
Opt in to a guided tour with localized title/description.	Ship a hotspot with placeholder or English-only copy.	`enableAsHotspot`, `guidedTourHotSpotTitle`, `guidedTourHotSpotDescription`
Keep footer content to short actions and brief status text.	Place long paragraphs or complex layouts in the footer.	`elements`
Express action priority by ordering children explicitly.	Reorder buttons mid-session without need, causing focus jumps.	`elements`
Set a clear `displayName` for authors.	Leave default or ambiguous names that hinder maintenance.	`displayName`

Accessibility

Maintain a predictable reading order by choosing layout and arranging elements intentionally.
Ensure comfortable target separation using consistent internal spacing via gapClass and paddingClass.
Provide a stable automation handle for testing and audits with dataTestId.
Support localized hotspot copy via guidedTourHotSpotTitle and guidedTourHotSpotDescription when enableAsHotspot is active.
Prefer layout: "vertical" when labels risk wrapping, to preserve clarity and reading flow.