Versions Compared

Old Version 5

changes.mady.by.user GE-DevDoc-Bot

Saved on

compared with

New Version 6

changes.mady.by.user GE-DevDoc-Bot

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

Button

Link to Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11523-163008&t=iosNC2AkSTGs5lMh-1

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.

...

  • 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.

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.

...

DoDon’tArticle setting(s)
Use a clear verb like “Submit” and localize it.Use vague labels like “OK” or leave a default.textTranslations
Use type="primary" for the single most important action.Mark multiple buttons as primary in the same context.type
Add an icon to support meaning, keeping text.Replace the text with an icon only.iconLeft, iconRight, textTranslations
Disable when permission is insufficient.Hide the button when users should understand they lack permission.authorizationDisable
Hide sensitive actions users must not see.Show a sensitive action and rely only on disable.visibilityPolicySetId
Show the button only when prerequisites are met.Keep it visible and interactive regardless of state.displayConditions
Provide short, localized tooltip microcopy.Put critical instructions solely in the tooltip.showTooltip, tooltipTextTranslations, tooltipDelay
Use built-in sizing and intrinsic fit.Hard-code size with external CSS.size, widthAuto, heightAuto, paddingClass
Wire the action to the click event.Depend on external surfaces to trigger logic.ON_BUTTON_CLICK, eventsInitialize and update on lifecycle events.Leave labels or state stale when parameters change.ON_INIT, ON_GLOBAL_PARAMETERS_CHANGE, ON_DESTROY

Do's and Don'ts for button

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.