Skip to main content

Button Component

The Button Component is a fundamental UI element in the CargoXplorer TMS System. It enables users to perform actions such as navigation, form submission, and triggering workflows. This component is highly customizable and can be integrated seamlessly into various parts of the application.

YAML Structure​

The Button Component is defined using YAML within the App Modules. Below is the standard structure for configuring a Button Component:

component: button
props:
  label: "Go to Home"
  options:
    variant: "primary"
    size: "md"
    disabled: false
  onClick:
    - navigate: "/home"

Attribute Description​

Props​

  • label (string, required):

    The text displayed on the button. It supports localization for multiple languages.

  • options (object, optional):

    Additional configurations for the button's appearance and behavior.

    • variant (string): Defines the visual style of the button. Common variants include:

      • primary
      • secondary
      • success
      • danger
      • warning
      • info
      • light
      • dark

    • size (string): Specifies the size of the button.

      • sm (small)
      • md (medium)
      • lg (large)

    • disabled (boolean): Disables the button when set to true.

  • onClick (array, optional):

    Defines the actions to be executed when the button is clicked. Supports multiple actions in a sequence.

    • navigate (string): Redirects the user to the specified route.
    • workflow (object): Triggers a defined workflow within the system.
    • mutation (object): Executes a GraphQL mutation.
    • validate (object): Performs form validation.

Common Attributes​

  • permission (string, optional):

    Specifies the permission required to interact with the button. If the user lacks the necessary permission, the button will be disabled or hidden based on the configuration.

  • isVisible (boolean, optional):

    Determines the visibility of the button. When set to false, the button is not rendered in the UI.

  • isHidden (boolean, optional):

    Hides the button from the UI without removing it from the DOM. Note that isVisible takes precedence over isHidden.

Examples​

Basic Button​

A simple button that navigates to the home page when clicked.

component: button
props:
  label: "Go to Home"
  options:
    variant: "primary"
    size: "md"
  onClick:
    - navigate: "/home"

Button with Multiple Actions​

A button that validates a form and then submits the data upon successful validation.

component: button
props:
  label: "Submit"
  options:
    variant: "success"
    size: "lg"
    disabled: false
  onClick:
    - validate:
        validationSchema:
          firstName:
            required:
              message: "First Name is required"
            min:
              length: 2
              message: "First Name should be more than 2 characters"
          lastName:
            required:
              message: "Last Name is required"
            min:
              length: 2
              message: "Last Name should be more than 2 characters"
    - mutation:
        command: "submitFormMutation"

Button with Permissions​

A button that is only visible to users with the Administrator role.

component: button
props:
  label: "Delete"
  options:
    variant: "danger"
    size: "sm"
    disabled: false
  onClick:
    - workflow:
        name: "deleteItemWorkflow"
  permission: "TMS/Item/Delete"

Best Practices​

  • Consistent Naming Conventions:

    Use descriptive and consistent names for buttons to enhance readability and maintainability. For example, saveButton, deleteButton, etc.

  • Localization:

    Utilize the localization features to support multiple languages. Ensure that the label property is properly localized.

  • Accessibility:

    • Ensure that buttons have clear and concise labels.
    • Utilize proper ARIA attributes if necessary to enhance accessibility for users with disabilities.

  • Permission Management:

    Assign appropriate permissions to buttons to control access based on user roles. This enhances security and ensures that only authorized users can perform specific actions.

  • Action Sequencing:

    When defining multiple actions within the onClick array, ensure that the sequence is logical. For instance, validate form data before submitting it.

  • UI Consistency:

    Maintain a consistent style and behavior for buttons across the application. This includes using consistent variant and size options.