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.
Placement
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
widthAutoandheightAuto; tune spacing withpaddingClass.
Tooltips
- Enable with
showTooltipand provide concise, localizedtooltipTextTranslations. - 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
idanddataTestId.
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, andguidedTourHotSpotDescription.
Dos & Don’ts
| 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 |
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.
