---
updatedAt: 2025-02-19T22:23:29.000Z
agentTools:
  projectIndex: https://customise.toq.io/llms.txt
---

# Header with Actions

It helps users orient themselves within the platform and provides an introduction to the current page. Replaces the Header component.

![](https://files.readme.io/df60f7231a8510bfcd61ada7b701fec3c5886e20f49f2342663c640bce34fb92-image.png)

# Properties

**Title** `string`\
Add the value of the title item. This can be a variable or a fixed value.

***

**Divider** `boolean`\
Select to show divider of the page header.

***

**Avatar Image** `string`\
Add the variable where your image is stored

> 📘 See also [Avatar](https://customise.toq.io/docs/avatar)

***

**Avatar Initials** `string`\
This component will take the initial letters of a variable or an expression (up to three initials). If you add a single string, it will take only the first letter of each word. This will be a fallback if the image is not.

***

**Avatar Icon** `enum`\
Select an icon to be added to the item. This will be a fallback if the image is not found and no initials have been added.

***

**Back Button** `boolean`\
Add a back button on top of the header. This button will go to the URL defined in the field Back Button URL.

***

**Avatar Initials** `string`\
This component will take the initial letters of a variable or an expression (up to three initials). If you add a single string, it will take only the first letter of each word. This will be a fallback if the image is not.

***

**Avatar Icon** `enum`\
Select an icon to be added to the item. This will be a fallback if the image is not found and no initials have been added.

***

**Back Button** `boolean`\
Add a back button on top of the header. This button will go to the URL defined in the field Back Button URL.

***

**Back Button URL** `string`\
URL where the back button will lead the user to.

***

**Go Back Button Label** `string`\
Label for the Back Button.

***

**Primary Label** `string`\
Label for the Back Button.

***

**Secondary Label** `string`\
Add the value of the secondary label, shown in regular font below the value of the component.

***

**Link Value** `string`\
Add the text you will see in the link to be shown below the title. This can be a variable or a fixed value.

> 📘 See also [Link](https://customise.toq.io/docs/link)

***

**Link URL** `string`\
Add the URL for Link Value.

***

**Link Icon** `enum`\
Select the icon to be shown in the left-hand side of the link value.

***

**Chip Value** `string`\
Add the value of the chip item. This can be a variable or a fixed value.

> 📘 See also: [Chip](https://customise.toq.io/docs/chip)

***

**Status Mapping** `table`\
Map the variables with the expected chip style.

| Name           | Type                                                                                                                                  | Description                                     |
| :------------- | :------------------------------------------------------------------------------------------------------------------------------------ | :---------------------------------------------- |
| Status value   | `"string", "variable", "expression"`                                                                                                  | Value to match with the component status value. |
| Status label   | `"string"`  \| `multilanguage`                                                                                                        | Label for the value.                            |
| Status variant | `"ENUM ("success", “info”, “warning”, “danger”, “neutral”, “grey blue”, “vermilion”, “orange”, “grass”, “brownie”, “sky”, “purple”)"` | Variant for the value.                          |

***

**Header Action Value** `string`\
Add the expression for the header actions. This will change according to the selected action.

***

**Actions** `string`\
Add a JSON with the array of actions of a page. The component will handle how to show them (button or modal) according to the elements quantity.