Versions Compared

Key

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

...

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

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

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

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

  • iconRight - Icon displayed on the right side of button text.

  • iconLeft - Icon displayed on the left side of button text.

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

  • widthAuto - Controls whether the button width automatically adjusts to its content. When set to true, the button will be only as wide as needed for its text and padding; when set to false, it will fill its container according to layout rules.

  • heightAuto - Controls whether the button height automatically adjusts to its content. When set to true, the button height is determined by its content; when set to false, it follows fixed height settings based on the selected size.

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

...