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