ActionButtonElement Documentation

Overview

The ActionButtonElement is a dynamic UI component designed for user interactions within the Vantage analytics and data platform. It serves the purpose of triggering specific workflows or actions, encapsulated in a visually appealing button format. This component can be customized according to user requirements, enabling flexibility in alignment, labeling, and styling, ensuring it fits seamlessly within various application interfaces.

Settings

The ActionButtonElement component accepts several customizable settings to cater to different use cases. Below are the detailed descriptions of each setting:

1. Button Label

• Input Type: String
• Description: This setting determines the text that appears on the button. By default, if no label is provided via the config.buttonLabel, it will use the element's label property or revert to a default value of 'Run Workflow'.
• Default Value: 'Run Workflow'

2. Alignment

• Input Type: String (Dropdown: left, center, right, justify)
• Description: This setting defines the alignment of the button within its container. The possible values are:
  • left: Aligns the button to the left.
  • center: Centers the button within its container.
  • right: Aligns the button to the right.
  • justify: Stretches the button across the container, justifying to retain space between other elements.
• Default Value: 'center'

3. Button Style

• Input Type: String (Dropdown: outline, filled)
• Description: This setting determines the visual style of the button. The two options are:
  • outline: Creates a button with a border and transparent background, ideal for less emphasis on the action.
  • filled: Creates a solid-colored button that attracts attention, indicating a primary action.
• Default Value: Filled (default style)

4. Button Color

• Input Type: String (Hex color code)
• Description: This setting allows customization of the button's color. If a button style of 'outline' is selected, this color will be used for the border and text. If 'filled' is utilized, this color fills the button background. If not specified, default color settings will apply.
• Default Value: None (inherits default styles unless provided)

5. Custom Style

• Input Type: Object (CSS properties)
• Description: This setting accepts a style object allowing for further customization of the button's design. Users can define custom margins, padding, or other CSS properties as needed.
• Default Value: None (individual customization)

How It Works

The ActionButtonElement is constructed as a functional component that receives an element prop with a config object. The component retrieves configuration settings like buttonLabel, align, and buttonStyle to dynamically render the button according to the specified parameters. Alignment classes are determined based on the align value provided, affecting the layout of the button within its container.

The button itself is a flex container, ensuring proper spacing between an icon (a Play button from the lucide-react package) and the label text. The styles and colors are conditionally applied based on the provided configurations, allowing both visual appeal and functionality.

Use Cases & Examples

Use Cases

1. Workflow Initiation: In a business analytics dashboard, the ActionButtonElement could be prominently featured to enable users to start data processing tasks, such as generating reports or triggering data alerts.

2. Interactive Data Applications: In applications requiring user interaction, like data exploration tools, this component can serve as an interface option for users to submit queries or refresh datasets.

3. Real-time Action Triggers: In monitoring applications, this component can be used to allow users to initiate recovery actions, such as restarting a process when an anomaly is detected in the analytics data.

Example Configuration

Let's consider a scenario where a data analytics dashboard needs a button for users to initiate a report generation workflow. Below is an example of how the ActionButtonElement might be configured for this use case:

const reportButtonConfig = {
    element: {
        config: {
            buttonLabel: 'Generate Report', // Custom button label
            align: 'center',                // Center alignment
            buttonStyle: 'filled',         // Solid color button
            buttonColor: '#007bff',        // Bootstrap primary color
            style: {                        // Additional styles
                margin: '10px',
                padding: '12px'
            }
        },
        label: 'Report Button' // Fallback if config.label is not provided
    }
};

// Rendering the ActionButtonElement
<ActionButtonElement {...reportButtonConfig} />

In this configuration:

• The button is labeled 'Generate Report'.
• It is centered within its container.
• The button has a filled style with a custom blue color.
• Additional margins and paddings are applied for better spacing.

This detailed documentation provides a comprehensive understanding of the ActionButtonElement, ensuring users can effectively implement and customize it within their applications while considering different business needs and scenarios.