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

Button

Overview

• The Button component is an interactive element that triggers actions when clicked.
• It supports different visual styling options to fit the interface design.
• Tooltip configuration allows providing extra information on hover.
• Authorization rules can control whether the button is shown or enabled.

Specs

Tokens

Structure

• The label shows the main action text, which can be translated into different languages.
• Icons can be added on the left or right side of the label to give extra meaning.
• A tooltip can appear when hovering, offering short helper text placed above, below, left, or right of the button.
• The overall shape and size of the button adjust automatically based on its content and configuration, while rules for visibility and permissions decide whether the button is shown or active.

(Configured in General Properties)

• displayName – Sets the display name of the component shown in the structure panel. For example, "Submit Order Button" allows for easy identification of the button's purpose in the component structure, making it easier for developers to locate and work with this specific button.
  
  • textTranslations – Sets the text displayed on the button with support for multiple languages. For example, {"en-US": "Submit", "de-DE": "Absenden"} ensures proper localization of the button text for different language settings.

(Configured in Visibility Properties)

• displayConditions – Defines conditions for displaying the component. This allows showing or hiding the button based on complex rules involving form values, user roles, or application state. For example, a "Submit" button might only be shown when all required fields are filled in.

Tooltip

(Configured in Visual Properties)

• showTooltip – Controls whether a tooltip is displayed when hovering over the button. When enabled, provides additional information about the button's function to users.
• tooltipTextTranslations – Sets the text displayed in the tooltip with support for multiple languages. For example, {"en-US": "Submit order for processing", "de-DE": "Bestellung zur Bearbeitung absenden"} provides localized helper text when users hover over the button.
• tooltipPlacement – Determines the position of the tooltip relative to the button. Options include "top", "bottom", "left", and "right". For example, "top" places the tooltip above the button, which works well in most standard layouts.
• tooltipDelay – Sets the delay in milliseconds before the tooltip appears when hovering over the button. For example, setting to "300" causes the tooltip to appear after 300 milliseconds, preventing tooltips from appearing too quickly during casual mouse movements.

Styling

(Configured in Visual Properties)

• size – Determines the size of the button. Options include "medium", "large", or "extra_large". For example, "large" makes the button more prominent for primary actions, while "medium" is suitable for secondary actions in forms.
• paddingClass – Configures spacing around the button using CSS classes. For example, "p-2" adds light padding on all sides of the button, improving its visual spacing within its container.
• iconLeft – Icon displayed on the left side of button text.
• iconRight – Icon displayed on the right side of button text.
• widthAuto – Controls whether the button width automatically adjusts to its content.
• heightAuto – Controls whether the button height automatically adjusts to its content.

Actions & Variants

(Configured in Events)

• events – Configures the events that the component can trigger and respond to:
• ON_BUTTON_CLICK – Triggered when the button is clicked. Can be used to submit forms, navigate to different views, open dialogs, or perform any other action.
• ON_GLOBAL_PARAMETERS_CHANGE – Triggered when global parameters that affect the button change.
• ON_INIT – Triggered when the button component is initialized. Can be used to perform setup operations when the button first appears.
• ON_DESTROY – Triggered when the button component is removed from the DOM. Useful for cleanup operations and releasing resources.

(Configured in Visual Properties)

• type – Specifies the visual style of the button. Options include "primary" (emphasized), "secondary" (less emphasized), or "ghost" (minimal styling). For example, using "primary" for a submit button and "secondary" for a cancel button creates a clear visual hierarchy.

Tests

(Configured in Testing Hooks)

• id – Specifies a unique identifier for the component used for programmatic access. For example, "submitOrderButton" enables targeted manipulation of this specific button through scripts or automated tests.
• dataTestId – Sets the testing hook ID for automated testing. For example, setting to "submit-order-btn" allows test scripts to reliably locate and interact with this button during automated testing.
• enableAsHotspot – Enables the component as a guided tour hotspot. When enabled, the button can be highlighted during onboarding or tutorial flows to guide users to important actions.
• guidedTourHotSpotTitle – Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "Submit Button", "de-DE": "Senden-Schaltfläche"} provides clear identification during guided tours.
• guidedTourHotSpotDescription – Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "Click here to submit your order", "de-DE": "Klicken Sie hier, um Ihre Bestellung abzusenden"} provides detailed instructions during guided tours.

Authorization

(Configured in Authorization)

• authorizationDisable – Specifies a policy set that determines whether the button should be enabled or disabled based on user permissions. For example, setting to "editingPermissions" would disable the button for users who don't have editing permissions, while still showing it in the interface.
• visibilityPolicySetId – Determines the visibility of the component based on specified policy sets. For example, setting to "adminActions" makes the button visible only to users with administrator privileges.

Links

• Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11523-163008&t=iosNC2AkSTGs5lMh-1
• Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/id2/1-button

Guidelines

Hierarchy

• Buttons follow a visual hierarchy that reads right → left.
• Primary is the most important action and should stand out (e.g., Save, Submit, Apply).
• Danger (semantic) is for destructive actions; a lone, strongly destructive primary (e.g., Delete) may use the semantic style.
• Secondary covers all other, less prominent actions (e.g., Copy, Cancel).
• Negative path is a non-committing alternative; treat it as a separate, lower-emphasis option.

Sizing & Layout

• In dialog button groups: Cancel far left, Primary far right, and only one primary per dialog; buttons are full-bleed at the bottom.
• Single-button dialogs: one primary spanning the full width.
• Two buttons: secondary on the left, primary on the right; each 50% width.
• Three buttons: each 33.33%; only the rightmost may be primary (if actions are equal, use three secondary).
• Place action buttons as close as possible to the content they affect; in toolbars, right-align them.
• In relevant empty states, include a primary action button (or direct link) to guide the next step.
• Select size (medium, large, extra_large) to match emphasis and readability needs.
• Let the control fit content via widthAuto and heightAuto; tune spacing with paddingClass.

Tooltips

• Enable with showTooltip and provide concise, localized tooltipTextTranslations.
• Position using tooltipPlacement (top, right, bottom, left).
• Add tooltipDelay (e.g., 300 ms) to reduce accidental reveals.
• Treat tooltips as supplemental only.

Visibility & Authorization

• Hide entirely for restricted audiences via visibilityPolicySetId.
• Keep visible but non-interactive for permission gaps via authorizationDisable.
• Expose automation hooks with id and dataTestId.

Content & Localization

• Use clear, descriptive verbs for labels (e.g., Add, Delete, Save).
• Avoid vague terms like OK or Done.
• Localize tooltip microcopy via tooltipTextTranslations.
• For guided onboarding, opt into hotspots with enableAsHotspot, guidedTourHotSpotTitle, and guidedTourHotSpotDescription.

Dos & Don’ts

Accessibility

• Localize all user-facing strings: textTranslations, tooltipTextTranslations, guidedTourHotSpotTitle, guidedTourHotSpotDescription.
• Avoid color-only distinctions by pairing type with clear labels and optional icons (iconLeft/iconRight).
• Increase target clarity with size and paddingClass when needed.
• Use authorizationDisable to communicate lack of permission versus visibilityPolicySetId when the action must be concealed.
• Choose tooltipPlacement that avoids covering adjacent content; add tooltipDelay to reduce accidental reveals.