> For the complete documentation index, see [llms.txt](https://docs.boii.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.boii.dev/fivem-free-resources/bduk/core-ui/footer.md).

# Footer

<figure><img src="/files/gqdxnHVIiMMHPptxHMFc" 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.