# Footer

<figure><img src="https://3046942752-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHfd391cB6wDC8S3yHcie%2Fuploads%2F2xNoomRc7CIncyPHMmQP%2Fimage.png?alt=media&#x26;token=725096d6-c470-4bc9-94b3-cdd60c7a0e48" alt=""><figcaption></figcaption></figure>

The `footer` sits at the bottom of the BDUK UI layout and serves as a **flexible, function-rich area** for actions, buttons, hotkeys, tooltips, and even profile info. It follows the same `left`, `center`, and `right` layout system as the `header`.

***

## Structure

You define a `footer` like so:

```lua
footer = {
    layout = {
        left = { justify = "flex-start", gap = "1vw" },
        center = { justify = "center" },
        right = { justify = "flex-end", gap = "1vw" },
    },
    elements = {
        left = {
            {
                type = "buttons",
                buttons = {
                    { id = "deploy", label = "Deploy", on_action = function(data) ... end, class = "primary" },
                    { id = "cancel", label = "Cancel", action = "close_builder", class = "secondary" }
                }
            }
        },
        center = {
            { type = "text", text = "Ready to deploy." }
        },
        right = {
            {
                type = "actions",
                actions = {
                    { key = "ESC", label = "Close" },
                    { key = "E", label = "Confirm" }
                }
            }
        }
    }
}
```

You may omit or include any section (`left`, `center`, `right`) and place elements in whichever position you need. All elements are fully swappable.

***

## Supported Elements

The `footer` supports a range of useful UI components:

| `type`     | Description                                             |
| ---------- | ------------------------------------------------------- |
| `text`     | Simple centered or aligned string label.                |
| `action`   | Single hotkey + label (e.g. `ESC = Close`).             |
| `actions`  | Group of hotkeys displayed inline.                      |
| `buttons`  | One or more clickable buttons with callbacks.           |
| `group`    | Inline wrapper for grouping elements together.          |
| `namecard` | Same identity block used in the header (optional here). |

Each type is handled internally by the `Footer` class with intelligent layout styling and optional click hooks.

***

## Alignment Control

You can define layout styles for each section using `justify`, `align`, and `gap` just like in the header:

```lua
left = {
    justify = "flex-start",
    align = "center",
    gap = "1vw"
}
```

These map directly to CSS flexbox properties.