# Layout

Layout components allow you to adjust the layout of a Components V2 message. There are four types of layout components:

| Component                 | Description                                  |
| ------------------------- | -------------------------------------------- |
| [Container](#container)   | Root container for components.               |
| [Section](#section)       | Text with required accessory (button/image). |
| [Separator](#separator)   | Visual divider between content.              |
| [Action row](#action-row) | Container for buttons (max 5)                |

***

## Container

<figure><img src="/files/Q7GEyZ0apY5XB76LV4oZ" alt=""><figcaption></figcaption></figure>

Containers can be used to create a container around a collection of components. They can optionally have an accent color set or be a spoiler.

<figure><img src="/files/qly3YOJ8NEGjdhjlkI4Q" alt=""><figcaption></figcaption></figure>

### Accent Color

Optionally enter the hex color of the accent bar. Any variables that return a hex color can be used here.

<figure><img src="/files/yJjAC1O1zVZBEQdL9dPW" alt=""><figcaption></figcaption></figure>

### Spoiler

If this value is set to `true`, the container will appear as a spoiler (blurred out). Defaults to false. Variables can be used here.

<figure><img src="/files/EGpd73qqKBtNzlKNKGEo" alt=""><figcaption></figcaption></figure>

***

## Section

<figure><img src="/files/C32Z2hWIPhNLt0kXSoNO" alt=""><figcaption></figcaption></figure>

A section is a component that allows you to contextually associate up to three text components with either an thumbnail image or a button.&#x20;

<figure><img src="/files/7KuZDPjMpbnrrP7UlisH" alt=""><figcaption></figcaption></figure>

***

## Separator

<figure><img src="/files/SH5DBrE8HXwQWbdhBiVt" alt=""><figcaption></figcaption></figure>

Separators can be used to visually separate two components with vertical padding and an optional divider line.

<figure><img src="/files/ExbmHEkDzUHWy7u23UNB" alt=""><figcaption></figcaption></figure>

### Spacing Size

Separators can have either small or large spacing size. Set this to `SMALL` to create a compact visual break. Set it to `LARGE` to create a more prominent divider. Variables that return either `SMALL` or `LARGE` can be used here. Defaults to small spacing.

<figure><img src="/files/AXMg8m5F2TmZRQjCPvhv" alt=""><figcaption></figcaption></figure>

### Show Divider Line

Set this to `true` to create a small divider line in between sections. Variables that return either `true` or `false` can be used here. Defaults to false.

<figure><img src="/files/S3A04J6JPdtTMrAy0SJy" alt=""><figcaption></figcaption></figure>

***

## Action Row

<figure><img src="/files/dO9g1ROIBM9ueS4ofIuq" alt=""><figcaption></figcaption></figure>

Action rows are containers for components and can contain up to five buttons or a single select menu. A maximum of five can be present in a single message.

<figure><img src="/files/4cXIqBNrSk05K74PnLq9" alt=""><figcaption></figcaption></figure>


---

# 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://documentation.botghost.com/custom-commands-and-events/actions/message-actions/send-or-edit-a-message/layout.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.