Skip to main content

Button

The Button component is a fundamental interactive element designed to trigger actions within an application. This component is essential for applications that require user interaction to perform tasks such as submitting forms, navigating between pages, or executing commands. By using the Button component, businesses can enhance the user experience by providing a clear and intuitive interface for initiating actions. The component supports various configurations, allowing it to be tailored to specific application needs, including form validation and visual customization with icons and tooltips.

Properties​

To effectively utilize the Button component, the following data and attributes are necessary:

  • Component-Level Attributes:
    • Code: A unique identifier for the Button component, used for referencing and integration within larger systems or applications. This code is essential for enabling interactions and actions related to the component.
    • Label: The text displayed inside the button, providing context and clarity to the user about the action that will be performed when the button is clicked.
  • Functional Attributes:
    • Type: Defines the button's function as either "submit form" or "on click." A "submit form" type validates the form before triggering the action, ensuring that all required fields are completed and valid. An "on click" type triggers the action immediately, disregarding form validity, which is useful for actions that do not depend on form data.
  • Visual and Interaction Attributes:
    • Icon: Specifies which icon is displayed alongside the label on the button, enhancing visual appeal and providing a quick visual cue about the button's function.
    • Icon Position: Determines where the icon is shown in relation to the label on the button. Options include positioning the icon to the left or right of the text, allowing for visual customization based on design preferences.
    • Tooltip: Text displayed when the user hovers over the button, offering additional information or guidance about the button's function. This feature enhances usability by providing context without cluttering the interface.
    • Enabled: A setting (default is ON) that determines whether the button is active and can be clicked by the user. If disabled, the button is visually indicated as inactive, preventing user interaction.

By structuring the Button component with these attributes, businesses can create a flexible and user-friendly interface that effectively facilitates user interactions. The ability to customize labels, icons, and tooltips ensures that the component remains a powerful tool for enhancing application functionality and user experience.

Style​

Best Practices​

  • Clarity and Usability: Ensure that the button is clearly labeled to indicate its action. Use descriptive text such as "Submit," "Cancel," or "Learn More" to guide users on what to expect when they click the button.
  • Visual Feedback: Provide visual feedback on hover and active states to indicate that the button is interactive. This can include changes in color, shadow, or size.
  • Accessibility: Ensure that buttons are accessible by providing proper labels and ensuring they can be navigated using keyboard shortcuts and screen readers.

Highest Value Features​

  • Consistent Styling: Maintain consistent styling for buttons across your application to create a cohesive user experience. This includes using the same colors, fonts, and sizes for similar actions.
  • Size and Padding: Ensure buttons are large enough to be easily clickable on all devices, with adequate padding to enhance usability.
  • Color Contrast: Use high-contrast colors for text and background to ensure readability and accessibility.

All the Settings​

Border​

  • BORDER: Customize the border style, width, and color of the button to define its outline and separation from other elements. Use the following settings:
    • BORDER OPTIONS:
      • Style: solid, dashed, dotted, etc.
      • Width: specify the thickness of the border in pixels.
      • Color: choose a color using a color picker or HEX, RGBA, HSLA values.

Padding​

  • PADDING: Adjust the padding around the button to create space between the text and the border. Use the following settings:
    • PADDING OPTIONS:
      • Icon: all padding, top padding, left padding, bottom padding, right padding.
      • Size: in pixels using up and down arrows or by entering a numeric value.

Background​

  • BACKGROUND: Customize the background of the button using the following settings:
    • BACKGROUND OPTIONS:
      • Background Color: Set the background color using a color picker or enter values in HEX, RGBA, or HSLA format.
        • Design System: By default this follows the "Accent one" on the active design system.
      • Image: Select an image from the media library or provide a URL for an online image.
      • Background Attachment: Choose how the background behaves with options like scroll, fixed, local, initial, or inherit.
      • Background Position X/Y: Adjust the position of the background image along the X-axis (horizontal) and Y-axis (vertical) using pixel values.
      • Background Repeat: Control how the background image repeats with options like repeat, repeat-x, repeat-y, no-repeat, initial, or inherit.
      • Background Size: Set the size of the background image to auto, cover, contain, or use specific dimensions.
      • Background Origin: Define the positioning area of the background with options like border-box, padding-box, content-box, initial, or inherit.

Label Font​

  • LABEL FONT: Customize the font of the button text using the following settings:
    • Design System: By default this follows the "Label medium" on the active design system.
    • FONT OPTIONS:
      • Alignment: left, center, right, aligned.
      • Font type: choose from available font families.
      • Font-size: number expressed in px, em, or rem (where "em" is relative to the font size of the element itself, and "rem" is relative to the root element's font size).
      • Letter spacing: in pixels.
      • Line height: in pixels.
      • Style: normal, italic, oblique, initial (inherits the browser’s default), inherit (inherits from the parent element).
      • Weight: thin, extra light, light, normal, medium, semi bold, bold, extra bold, black.
      • Color: picker or values in HEX, RGBA, HSLA.
      • Stretch: Normal, semi condensed, condensed, extra condensed, ultra condensed, semi expanded, expanded, extra expanded, ultra expanded.
      • Variant: normal, small caps, initial (inherits the browser’s default), inherit (inherits from the parent element).
      • Caps variant: normal, small caps, all small caps, mini caps, all mini caps, unicase, titling caps, initial (inherits the browser’s default), inherit (inherit from the parent element).

Explanation of Terms​

  • Initial: Sets the property to its default value as defined in the CSS specification.
  • Inherit: Makes the element inherit the property from its parent element.
  • em/rem: Relative units based on the font size of the element or root element, respectively. An "em" is relative to the font size of the element itself, while a "rem" is relative to the font size of the root element (usually the <html> element).

This style guide provides a comprehensive overview of the styling options available for the Button component in NoCode-X, ensuring users can create visually appealing and functional designs.

Actions​

Event: On Click​

  • This action is executed whenever the button is clicked by the user.
  • It initiates interactions or processes based on the user's click, enabling dynamic functionality within the application.

Compatible functions​

  • Disable button
  • Enable button