Button component

The Button component is an interactive element used in dashboards to perform custom actions such as applying filters, toggling chart views, or drilling into data. Buttons improve user interactivity by allowing end-users to control the display, trigger actions, or navigate through the dashboard.

Buttons can be styled with categories, colors, hover effects, and outlined variants to align with dashboard themes.

Best Situations to Use

Use the Button component when you want to:

  • Toggle chart types (e.g., switch between bar and line charts).

  • Apply or reset filters on dashboard data.

  • Drill down into details or navigate across dashboard views.

  • Zoom in or out of charts for better analysis.

  • Provide a clear call-to-action in dashboards.

Not Recommended for:

  • Displaying static information (use Label or Text Box instead).

  • Triggering highly complex workflows without proper backend integration.

Properties

General

  • Component Name: Assign a unique identifier.

  • Left / Top: Define the position of the button on the dashboard canvas.

  • Height / Width: Set the dimensions of the button.

  • Initial Visibility: Toggle whether the button appears on first preview.

  • Label Text: Define the text displayed on the button.

  • Click Value: Assign a value/action triggered when the button is clicked (e.g., drill action).

Background

  • Shadow: Enable or disable button shadow.

  • Shadow Color: Define shadow hue.

  • Shadow Transparency: Adjust opacity of the shadow.

Style

  • Font Size: Set the font size for the button label.

  • Font Style: Apply text styling (normal, italic).

  • Font Weight: Set text thickness (e.g., normal, bold, 300/600/900).

  • Font Family: Choose a typeface consistent with dashboard branding.

  • Button Radius: Round the button corners.

  • Button Category: Select from predefined categories:

    • Primary, Secondary, Success, Warning, Danger, Light, Info, Dark.

  • Outlined Button: Display button with an outline instead of filled background.

  • Custom Colors: Customize font color, background color, and hover color.

Variants

By adjusting category and style settings, multiple button styles can be created:

  1. Primary Button – Default theme color for key actions.

  2. Secondary Button – Subdued style for secondary actions.

  3. Success Button – Typically styled in green to indicate success actions.

  4. Warning Button – Styled in yellow/orange for caution actions.

  5. Danger Button – Styled in red to highlight destructive or critical actions.

  6. Info Button – Styled in blue for informative actions.

  7. Light & Dark Buttons – For minimal or bold dashboard themes.

  8. Outlined Button – Border-only styling for subtle actions.

  9. Custom Styled Button – Fully customized with user-defined background, font, and hover colors.

Example Configurations

  1. Filter Reset Button

    • Label: Reset Filters

    • Category: Warning

    • Action: Clears applied filters.

  2. Chart Toggle Button

    • Label: Switch to Line Chart

    • Category: Primary

    • Action: Toggles chart type dynamically.

  3. Drill Down Button

    • Label: View Details

    • Category: Success

    • Action: Triggers drill-down into component data.

Notes

  • Use consistent button categories across dashboards to maintain UI standards.

  • Apply hover effects to indicate interactivity.

  • Reserve danger buttons for actions that may have significant impact (e.g., reset, delete).

  • Pair buttons with labels or tooltips for clarity.

PreviousInputbox componentNextCustom Charts