---
title: "Visual Components"
description: "A collection of visual and utility components for displaying media, shapes, and interactive visuals on dashboards."
group: Components
tags: [Visual, Display, Icon, Image, Shape, Dashboard, Media, Utility]
---

import { Aside } from '@astrojs/starlight/components';

# Visual Components

Visual components allow dashboards to display decorative, informative, and utility elements like icons, images, shapes, or report previews — enhancing readability, layout, and interaction within dashboards.


---

## 🎨 Widget Customizations

All visual components share these customization sections:

| Group       | Description |
|:------------|:-------------------------------------------------------------|
| **[General](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#general)** | Modify the chart’s general appearance, including the background color, borders, shadows, and drill-out choices.
| **[Title](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#title)** | Enable and customize chart title text, alignment, font, and color. |

---

## 📑 Report List

A configurable, interactive list of reports that can be styled with colors, gradients, and icons, allowing users to download reports directly from a dashboard.

**Key Features:**
- Select and display multiple reports.
- Customize tile height, gaps, margins, colors, and gradient backgrounds.
- Choose between report icons, name initials, or custom icons.
- Optionally display the creator's name below each report.
- Supports linear or radial gradient backgrounds.
- Automatically enables download-on-click functionality in runtime mode.

<Aside>
 Use Report Lists to quickly showcase key downloadable reports inside your dashboards with rich visual styling.
</Aside>

---

## 🟢 Shape

A versatile vector shape component that can render rectangles, circles, ellipses, triangles, or custom polygons on a dashboard. Useful for visual grouping, decoration, or interaction areas.

**Key Features:**
- Choose from Rectangle, Circle, Ellipse, Triangle, or custom Polygon shapes.
- Customize fill color, stroke color, and stroke width.
- Set rotation and scale for dynamic visual adjustments.
- Define number of sides for Polygons (3 to 20).
- Supports click actions through the Action Control system.
- Fully resizable and themeable via widget options.

<Aside>
 Shapes can serve as visual markers, background elements, separators, or interactive hotspots within a dashboard layout.
</Aside>

---

## 🖼️ Icon

A simple, scalable vector icon component to display symbolic or decorative icons within a dashboard.

**Key Features:**
- Supports all icons from the Infoveave icon library.
- Customizable color and scale.
- Optional animations: Beat, BeatFade, Bounce, Fade, Shake, Spin, SpinPulse.
- Click actions via the Action Control system.
- Respects global theme and dashboard interactions.

<Aside>
 Icons are great for drawing attention to status indicators, alerts, actions, or decorative visuals on a board.
</Aside>

---

## 🔘 Button

A configurable button component supporting labels, icons, and interactive actions within a dashboard.

**Key Features:**
- Customizable label using rich text.
- Supports left and right icons with adjustable sizes, colors, and spacing.
- Multiple variants: Filled, Outline, Subtle, Light, Default, and White.
- Configurable background color (when using the 'filled' variant).
- Optional disabling of the button.
- Click actions via the Action Control system.
- Respects global theme and board interactions.

<Aside>
 Use buttons for triggering actions like navigation, data refresh, or custom workflows within dashboards.
</Aside>

---

## 🖼️ Image

A versatile image display component for dashboards, supporting filters, effects, and interactive actions.

**Key Features:**
- Supports background image display via uploaded or linked images.
- Customizable background position, repeat, and sizing options.
- Opacity control and a range of image filters:
  - Blur, Brightness, Contrast, Grayscale, Hue Rotation, Invert, Saturation, and Sepia.
- Click actions via the Action Control system.
- Fully respects dashboard theme and styling.

<Aside>
 Use image components for banners, logos, icons, or visual decorations within dashboards — with the flexibility of CSS-style filters and interactions.
</Aside>

---

## 📝 Text

A rich text display and editing component for adding formatted text content within dashboards.

**Key Features:**
- Supports rich text formatting including paragraphs, headings, bold, italic, links, lists, and more.
- Uses an integrated rich text editor overlay for in-place content editing.
- Click actions via the Action Control system.
- Respects dashboard theme, sizing, and board interaction modes.
- Full content persistence and variable-based content management.

<Aside>
 Ideal for adding annotations, instructions, section headers, or descriptive content directly into your dashboards.
</Aside>

---

## 🗺️ Diagram

An interactive diagram component for displaying custom freehand diagrams, flowcharts, or sketches within dashboards.

**Key Features:**
- Supports shapes, connectors, text, and freehand drawing via an integrated diagram editor.
- Editable directly within the dashboard when selected.
- Diagram content is persisted as JSON, storing elements, positions, and styles.
- View-only mode when not selected; editor modal appears when editing.
- Full support for dashboard sizing, layout, and responsiveness.

<Aside>
 Perfect for visualizing processes, wireframes, simple org charts, or illustrating dashboard annotations.
</Aside>

---

## 🕒 Clock Chart

A dynamic clock-style gauge chart that visualizes the current time in hours, minutes, and seconds using animated gauge series.

**Key Features:**
- Displays three synchronized gauges representing hours, minutes, and seconds.
- Fully customizable gauge series styles, positions, and gauge options via configuration panels.
- Smooth animation updates every second to reflect real-time timekeeping.
- Supports configurable gauge centers, split numbers, easing animations, and theming via ECharts options.
- Dashboard sizing and responsiveness respected.

<Aside>
 Ideal for adding real-time clocks, time indicators, or visually engaging dashboard elements.
</Aside>

---

## 📏 Divider

A simple, structural element used to visually separate sections within a dashboard layout.

**Key Features:**
- Supports both **horizontal** and **vertical** orientations.
- Customizable line **thickness**, **color**, and **style variant**.
- Responsive — automatically fills available width or height based on orientation.

<Aside>
 Use this component to create visual breaks or separators between other board elements, enhancing readability and layout clarity.
</Aside>

---