Button

The Button component is used to trigger actions or events such as submitting forms, navigating pages, or calling APIs. It provides extensive customization for appearance, behavior, and interaction.

1. Basic Properties

• Name: The unique identifier of the button (e.g., Button1).
• Text: The visible label displayed on the button.
• Disabled: Prevents any interaction with the button.
• Hidden: Hides the button from the user interface but keeps it in logic.

2. Layout

The Layout settings determine how the button behaves across responsive screen sizes and spacing relative to other components.

📘 For more details, see Common Properties → Layout.

3. Icons

• Start Icon: Adds an icon before the button text.
• End Icon: Adds an icon after the button text.

These icons help improve visual cues and user experience.

4. Color & Variant

• Color: Choose between predefined color schemes (e.g., primary, secondary).
• Variant: Defines button style:
  • contained → Solid background
  • outlined → Transparent with border
  • text → Minimal, text-only

5. Size & Display Options

• Size: Options are small, medium, large.
• Full Width: Expands the button to fit its container width.
• Disable elevation: Removes the shadow effect.
• Disable focus ripple: Removes the ripple effect when focused.
• Disable ripple: Removes the click ripple animation.
• Loading: Displays a loading indicator inside the button.

6. Tooltip

The Tooltip provides additional information when users hover over or focus on the button.

• Title: The text displayed inside the tooltip.
• Placement: Defines where the tooltip appears (top, bottom, left, right).

📘 For detailed explanation and examples, see Tooltip.

7. Style

You can apply custom styles to the button for further UI customization.

📘 For details, see Common Properties → Style.