Home / Designing UI Elements

Button

Tech Writers Team @ Ucraft

Last updated on Sep 10, 2024

The Button UI element is an interactive element that allows users to trigger actions or submit commands with a simple click. 
To configure Button:

  1. Go to Styles to modify the element styling features:
  • Select the current condition of the element from the State dropdown:
    • Normal: The default state of Button when it is not being interacted with.
    • Hover:  The state of Button when the user hovers over it with the mouse cursor.
    • Focus: The state of Button when it is currently in focus or active.
    • Active: The state of Button when the user performs an action like clicking, tapping, or pressing.
    • Disabled: The state of Button when it is inactive or unavailable for interaction.
    • Selected: Active or currently selected state of Button, indicating that the user has specifically chosen or targeted it for a particular purpose.
  • Select how it behaves based on certain conditions or user interactions from the Mode dropdown:
    • Normal: The default state of Button when it is not being interacted with.
    • Loading: The state of Button once it is clicked.
  • Make the necessary configuration of principal styling features (see Global Styles).

2. Go to Content to make the necessary configuration of content:

  • Click + Add Link to add items to be displayed on your website and make them clickable for easy access. The items can be external links, products, phone numbers, email addresses, main pages (e.g. FAQ, Home, About), system pages, etc. This enables your customers to easily find the information they are looking for.
  • Click Change Icon, select the icon style you prefer, and tick the icon in the icon list that opens.
  • Indicate the name of the button in Label Text.

 

💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.