# Properties Panel

## ⚙️ Property Panel

The **Property Panel** is where you configure and customize each widget’s appearance, layout, and behavior. When you select a widget from the Canvas or Widget Tree, its properties are shown here.

***

### 🧱 Panel Structure

The panel is divided into two main sections:

***

#### 1. 🧩 Default Properties

This section appears for almost all widgets and contains three key groups:

**➕ Layout**

* **Visible:** Toggle widget visibility at runtime.
* **Width & Height:** Set dimensions (PX, %,).
* **Padding & Margin:** Control spacing inside and around the widget.
* **Alignment:** Use quick-align buttons to position elements horizontally or vertically.

**🎨 Appearance**

* **Fill Color:** Background color of the widget.
* **Border Radius:** Controls corner roundness.
* **Border:** Set border style, color, and width.

**⚡ Interactions**

* **onClick:** Define event-based actions like navigation, updating state, calling functions, etc.

***

#### 2. 📦 Additional Properties

Below the default properties, each widget shows **its own set of properties** depending on its type.

* For example, a **Text** widget may show font controls, while an **Image** widget will show source and fit options.
* These settings are contextual and may include content, media, data bindings, styling, and logic options.

***

> 📝 **Note:** Some widgets may not include all three default sections, and the additional properties are entirely dependent on the selected widget’s type and capabilities.

The Property Panel gives you full control over how a widget behaves and appears inside your app.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.digia.tech/studio-workspace/builder-tool/properties-panel.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.