Page History
...
| Token | Description |
|---|---|
| displayName | Display name shown in the structure panel. |
| contextJsonSchema | Defines schema for context data used with the button. |
| textTranslations | Sets the button text with multi-language support. |
| size | Determines button size: medium, large, or extra_large. |
| type | Specifies visual style: primary, secondary, or ghost. |
| showTooltip | Controls whether tooltip is displayed on hover. |
| tooltipTextTranslations | Tooltip text with multi-language support. |
| iconRight | Icon displayed on the right side of button text. |
| iconLeft | Icon displayed on the left side of button text. |
| tooltipPlacement | Position of tooltip: top, bottom, left, right. |
| tooltipDelay | Delay in ms before tooltip appears. |
| widthAuto | Adjusts width automatically to content if true. |
| heightAuto | Adjusts height automatically to content if true. |
| paddingClass | Configures spacing around button via CSS classes. |
| events | Configures component events. |
| ON_BUTTON_CLICK (Events) | Event triggered when button is clicked. |
| ON_GLOBAL_PARAMETERS_CHANGE (Events) | Event triggered when global parameters affecting the button change. |
| ON_INIT (Events) | Event triggered when the button is initialized. |
| ON_DESTROY (Events) | Event triggered when the button is removed from DOM. |
| authorizationDisable | Defines policy set for enabling or disabling button. |
| visibilityPolicySetId | Defines policy set for button visibility. |
| displayConditions | Rules for showing or hiding button. |
| id | Unique identifier for programmatic access. |
| dataTestId | Testing hook ID for automated tests. |
| enableAsHotspot | Enables button as hotspot for guided tours. |
| guidedTourHotSpotTitle | Title for guided tour hotspot, with translations. |
| guidedTourHotSpotDescription | Description for guided tour hotspot, with translations. |
...
- 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.
...
| Do | Don’t | Article 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, events | Initialize and update on lifecycle events. | Leave labels or state stale when parameters change. | ON_INIT, ON_GLOBAL_PARAMETERS_CHANGE, ON_DESTROY |
Accessibility
- Localize all user-facing strings:
textTranslations,tooltipTextTranslations,guidedTourHotSpotTitle,guidedTourHotSpotDescription. - Avoid color-only distinctions by pairing
typewith clear labels and optional icons (iconLeft/iconRight). - Increase target clarity with
sizeandpaddingClasswhen needed. - Use
authorizationDisableto communicate lack of permission versusvisibilityPolicySetIdwhen the action must be concealed. - Choose
tooltipPlacementthat avoids covering adjacent content; addtooltipDelayto reduce accidental reveals.
