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

Icon

Overview

The Icon component is a versatile UI element that displays an interactive icon.
It supports customizable appearance, behavior, and conditional display options.
The component includes styling options, tooltips, and hover states.
Icons can change appearance dynamically based on data context.
It is useful for interactive indicators, status displays, or clickable action buttons.

Specs

Tokens

Token	Description
displayName	Sets the display name of the component shown in the structure panel.
name	Specifies the icon to display from the icon library.
thresholdConfig	Configures conditional display rules that change the icon’s appearance based on data context.
size	Sets the size of the icon (e.g., "sm" or "lg").
iconOnHover	Defines an alternate icon shown when hovering over the component.
widthAuto	Controls whether the icon automatically sizes to its content or fills the container.
showTooltip	Determines whether a tooltip appears when hovering over the icon.
tooltipTextTranslations	Sets the tooltip text with support for multiple languages.
tooltipPlacement	Defines the position of the tooltip (top, bottom, left, right).
tooltipDelay	Sets the delay in ms before the tooltip appears on hover.
paddingClass	Configures spacing around the icon with CSS classes.
events	Configures the events the component can trigger or respond to.
ON_ICON_CLICK (Events)	Triggered when the icon is clicked.
ON_INIT (Events)	Triggered when the component is initialized.
ON_DESTROY (Events)	Triggered when the component is removed from the DOM.
visibilityPolicySetId	Defines visibility based on specified policy sets.
displayConditions	Defines rules for when the component is shown or hidden.
id	Sets a unique identifier for programmatic access.
dataTestId	Defines the testing hook ID for automated tests.
enableAsHotspot	Enables the component as a guided tour hotspot.
guidedTourHotSpotTitle	Sets the translated title for the guided tour hotspot.
guidedTourHotSpotDescription	Sets the translated description for the guided tour hotspot.

Structure

(Configured in General Properties)

displayName – Sets the display name of the component shown in the structure panel. For example, "Status Indicator Icon" allows for easy identification of the icon's purpose in the component structure, making it easier for developers to locate and work with this specific icon.

(Configured in Visual Properties)

name – Specifies the icon to display from the available icon library. For example, setting to "check-circle" displays a checkmark icon that can represent completion or success. This is the primary visual element of the component.
thresholdConfig – Configures conditional display rules that change the icon's appearance based on context data. For example, you can set rules to display a green check icon when a status is "complete" and a red warning icon when status is "overdue". This enables dynamic visual feedback based on data values.

(Configured in Visibility)

displayConditions – Defines conditions for displaying the component. This allows showing or hiding the icon based on complex rules involving form values, user roles, or application state. For example, the icon might only be shown when certain data conditions are met or when the user has specific permissions.

Tooltip

(Configured in Visual Properties)

showTooltip – Determines whether a tooltip appears when hovering over the icon. When enabled, provides additional context or instructions about the icon's purpose to users who may not immediately recognize its meaning.
tooltipTextTranslations – Sets the text displayed in the tooltip with support for multiple languages. For example, {"en-US": "Complete Task", "de-DE": "Aufgabe abschließen"} ensures proper localization of tooltip messages. This property can use template expressions to show dynamic content from context data.
tooltipPlacement – Determines the position of the tooltip relative to the icon. Options include "top", "bottom", "left", and "right". For example, "top" places the tooltip above the icon, which is useful in most standard layouts.
tooltipDelay – Sets the delay in milliseconds before the tooltip appears when hovering over the icon. For example, setting to "500" will delay the tooltip appearance by half a second, preventing tooltips from appearing too quickly during casual mouse movements.

Styling

(Configured in Visual Properties)

size – Sets the size of the icon. Options include "sm" (small) or "lg" (large). For example, choosing "lg" creates a more prominent icon that can serve as a focal point, while "sm" works well for inline indicators or dense layouts.
widthAuto – Controls whether the icon component automatically sizes to fit its content. When set to true, the icon will take only as much width as needed; when false, it will fill available space in its container according to specified dimensions.
iconOnHover – Specifies an alternate icon to display when the user hovers over the component. For example, setting "edit" as the hover icon on a "view" primary icon indicates that clicking will allow editing the item. This provides interactive feedback to users.
paddingClass – Configures spacing around the icon using CSS classes. For example, "p-2" adds light padding on all sides of the icon, improving its visual spacing within its container.

Actions & Variants

(Configured in Events)

events – Configures the events that the component can trigger and respond to.
ON_ICON_CLICK – Triggered when the icon is clicked. Can be used to execute workflows, navigate to other screens, or perform data operations based on user interaction.
ON_INIT – Triggered when the icon component is initialized. Can be used to perform setup operations when the icon first appears.
ON_DESTROY – Triggered when the icon component is removed from the DOM. Useful for cleanup operations and releasing resources.

Authorization

(Configured in Authorization)

visibilityPolicySetId – Determines the visibility of the component based on specified policy sets. For example, setting to "adminAct

Guidelines

Usage

Use icons for clear, concise actions or status—not decoration. Prefer text labels when meaning could be ambiguous.
Keep inline action icons aligned consistently within their parent pattern.
Move low-priority or extra actions into an overflow menu when space is constrained (pattern-level decision; icon supports this by remaining compact and hideable via displayConditions).

Sizing & Layout

Use the component’s size tokens: size: "sm" | "lg". (Exact pixel mapping is defined elsewhere in the design system.)
Respect grid/spacing via container layout and the component’s paddingClass to avoid “floating” icons.
Ensure usable tap/click targets by increasing the hit area with paddingClass or a clickable wrapper element (if applicable in your layout).

States & Feedback

Define and implement states at design/dev time:
Default: base icon via name.
Hover: optional affordance via iconOnHover.
Focus/Active/Disabled: implement using container or host element states (e.g., button wrapper), and/or displayConditions to hide instead of show a disabled icon.
Provide a visible keyboard focus indicator using the wrapper/control (the Icon itself has no dedicated focus token).

Color & Contrast

Apply high-contrast styling through your theme or container styles so icons remain legible in varied environments.
Do not rely on color alone for meaning; pair color with icon swaps (filled/outline, warning/check) using thresholdConfig or with nearby text.

Tooltips

Use tooltips for supplemental context only; keep copy brief.
Configure with component tokens:
showTooltip (on/off), tooltipTextTranslations (localized text),
tooltipPlacement (top/bottom/left/right),
tooltipDelay (ms before showing).
Avoid placing critical information only in a tooltip.

Interactions & Events

Bind primary behavior to ON_ICON_CLICK (navigate, run workflow, etc.).
Use ON_INIT for setup and ON_DESTROY for cleanup where needed.

Data-Driven Icons (Thresholds)

Use thresholdConfig to map data to icon/appearance (e.g., status: "complete" → check; "overdue" → warning).
Prefer icon swap or shape change (vs. subtle color changes) for state transitions.
Keep rules mutually exclusive and stable to avoid rapid toggling.

Visibility & Authorization

Use displayConditions to hide irrelevant or inapplicable icons entirely.
Use visibilityPolicySetId to show actions only to authorized users/roles.

Content & Localization

Keep tooltip strings action-aligned and concise; localize with tooltipTextTranslations (supports template expressions).
Use displayName for structure-panel clarity (e.g., “Status Indicator Icon”).

Environments & Input Methods

Assume mouse, keyboard, and touch. Increase clickable target area with paddingClass or a wrapper element to accommodate different inputs.

Accessibility

Do	Don’t	Relevant settings / notes
Use the component’s size tokens and spacing: set `size: "sm" \| "lg"` and add padding via `paddingClass` to align with grid.	Hard-code pixel sizes or ignore spacing tokens so icons “float” off-grid.	`size`, `paddingClass`
Provide a clear hover affordance by swapping to a related icon with `iconOnHover`.	Change the meaning of the action on hover (hover should not mislead or repurpose the action).	`iconOnHover`
Ensure a visible keyboard focus state on the interactive wrapper (e.g., button) that contains the Icon.	Rely on hover-only feedback or omit focus indication entirely.	Wrapper control (outside Icon)
Use `thresholdConfig` to swap icons (e.g., warning/check) to convey status.	Rely on color alone to indicate state/meaning.	`thresholdConfig`
Keep tooltips short and supplemental, configured with placement and delay appropriate to context.	Put critical instructions only in a tooltip or use long tooltip text.	`showTooltip`, `tooltipTextTranslations`, `tooltipPlacement`, `tooltipDelay`
Bind the primary action to `ON_ICON_CLICK` and make the outcome obvious (navigate, open dialog, run workflow).	Require unusual gestures (e.g., double-click) or bury logic in non-obvious places.	`events.ON_ICON_CLICK`
Hide irrelevant/inapplicable icons entirely using `displayConditions`.	Show disabled “clutter” that users can’t act on.	`displayConditions`
Restrict sensitive actions to the right audiences via `visibilityPolicySetId`.	Expose privileged actions to all users.	`visibilityPolicySetId`
Expand the tap/click target with `paddingClass` or a suitable wrapper to meet hit-area expectations.	Leave tiny hit areas that are easy to miss, especially on touch.	`paddingClass` (+ wrapper)
Keep inline action icons consistently placed; move overflow actions into an overflow pattern and hide extras conditionally.	Cram many icons into tight spaces or place them inconsistently across similar views.	Pattern-level + `displayConditions`
Ensure adequate contrast via your theme/container so icons are legible in varied environments.	Use low-contrast icons that disappear against the background.	Theme/container styles (outside Icon)
Localize tooltip copy using `tooltipTextTranslations` and keep it action-aligned.	Hard-code tooltip text in a single language.	`tooltipTextTranslations`
Name the component meaningfully for structure clarity (e.g., “Status Indicator Icon”).	Leave generic names that obscure the icon’s purpose.	`displayName`