> ## Documentation Index
> Fetch the complete documentation index at: https://lationscripts.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Modern UI - Drawer

> Slide-in panel for rich informational content with optional footer actions

Drawers provide a slide-in panel for displaying markdown content, structured sections, and optional footer actions. Ideal for evidence reports, quest details, intel briefings, and other read-only UI with optional confirm or submit buttons.

<Note>
  The drawer body is **read-only** — it does not include text inputs or form fields. Use [Input](/docs/modern-ui/components/input) for player-entered data.
</Note>

## Quick Start

```lua theme={null}
exports.lation_ui:showDrawer({
    id = 'evidence_report',
    title = 'Evidence Report',
    subtitle = 'Case #4421',
    icon = 'fas fa-file-lines',
    position = 'right',
    backdrop = true,
    content = '**Blood sample** collected at scene.',
    actions = {
        {
            label = 'Submit',
            variant = 'primary',
            serverEvent = 'police:submitEvidence',
            args = { caseId = 4421 },
        },
    }
})
```

## Functions

<AccordionGroup>
  <Accordion title="showDrawer" icon="eye">
    Open a drawer panel.

    ```lua theme={null}
    local opened = exports.lation_ui:showDrawer(data)
    ```

    **Parameters:**

    * `data` (table) - Drawer configuration object (see [Options](#options))

    **Returns:**

    * `opened` (boolean) - `true` if the drawer was shown, `false` if validation failed
  </Accordion>

  <Accordion title="hideDrawer" icon="xmark">
    Close the currently open drawer.

    ```lua theme={null}
    local closed = exports.lation_ui:hideDrawer(id)
    ```

    **Parameters:**

    * `id` (string, optional) - Drawer ID to close. If omitted, closes whichever drawer is open. If provided, only closes when the active drawer matches.

    **Returns:**

    * `closed` (boolean) - `true` if a drawer was closed, `false` otherwise
  </Accordion>

  <Accordion title="updateDrawer" icon="rotate">
    Partially update an open drawer without closing it.

    ```lua theme={null}
    local updated = exports.lation_ui:updateDrawer(id, data)
    ```

    **Parameters:**

    * `id` (string, required) - ID of the open drawer to update
    * `data` (table, required) - Partial drawer data to merge (e.g. new `content`, `sections`, or `actions`)

    **Returns:**

    * `updated` (boolean) - `true` if the drawer was updated, `false` if no matching drawer is open
  </Accordion>

  <Accordion title="isDrawerOpen" icon="circle-question">
    Check if a drawer is currently open.

    ```lua theme={null}
    local isOpen = exports.lation_ui:isDrawerOpen(id)
    ```

    **Parameters:**

    * `id` (string, optional) - If provided, checks whether that specific drawer is open

    **Returns:**

    * `isOpen` (boolean) - `true` if a drawer is open (or the specified drawer is open), `false` otherwise
  </Accordion>
</AccordionGroup>

## Configuration

### Options

<ParamField path="id" type="string" required>
  Unique drawer identifier
</ParamField>

<ParamField path="title" type="string">
  Header title (supports markdown)

  <Note>
    At least one of `title`, `subtitle`, `content`, or `sections` must be provided.
  </Note>
</ParamField>

<ParamField path="subtitle" type="string">
  Header subtitle (supports markdown)
</ParamField>

<ParamField path="content" type="string">
  Simple markdown body text
</ParamField>

<ParamField path="sections" type="table">
  Structured content blocks

  See [Sections](#sections) for available types.
</ParamField>

<ParamField path="icon" type="string">
  FontAwesome icon class (e.g. `'fas fa-file-lines'`)
</ParamField>

<ParamField path="iconColor" default="#9CA3AF" type="string">
  Icon color using hex code or [CSS color name](https://htmlcolorcodes.com/color-names/)
</ParamField>

<ParamField path="iconAnimation" type="string">
  Icon animation type

  Available options: `'spin'`, `'spinPulse'`, `'spinReverse'`, `'pulse'`, `'beat'`, `'fade'`, `'beatFade'`, `'bounce'`, `'shake'`
</ParamField>

<ParamField path="position" default="right" type="string">
  Slide-in position

  **Options:** `'left'`, `'right'`, `'bottom'`
</ParamField>

<ParamField path="size" default="md" type="string">
  Panel width (left/right positions only)

  **Options:** `'sm'` (320px), `'md'` (400px), `'lg'` (480px)
</ParamField>

<ParamField path="backdrop" default="false" type="boolean">
  Dim the background behind the drawer

  <Note>
    Visual only - the backdrop is not clickable. Players dismiss via X, Escape, footer actions, or `hideDrawer()`.
  </Note>
</ParamField>

<ParamField path="canClose" default="true" type="boolean">
  Whether the player can dismiss the drawer interactively

  When `true` (default):

  * Shows X button, footer actions, and Escape-to-close
  * Enables cursor focus while keeping WASD movement
  * Disables camera look while open

  When `false`:

  * Display-only overlay (no X, no footer buttons, no cursor lock)
  * Must be closed programmatically with `hideDrawer()`
</ParamField>

<ParamField path="actions" type="table">
  Footer action buttons

  Pass one or more buttons — you are not required to include both Close and Submit.

  See [Actions](#actions) for button options.
</ParamField>

### Sections

Structured content blocks for the drawer body. Use `sections` instead of or alongside `content`.

<Tabs>
  <Tab title="text">
    <ParamField path="type" type="string" required>
      Must be `'text'`
    </ParamField>

    <ParamField path="content" type="string" required>
      Markdown paragraph(s)
    </ParamField>
  </Tab>

  <Tab title="callout">
    <ParamField path="type" type="string" required>
      Must be `'callout'`
    </ParamField>

    <ParamField path="label" type="string">
      Callout title (supports markdown)
    </ParamField>

    <ParamField path="description" type="string" required>
      Callout body text (supports markdown)
    </ParamField>

    <ParamField path="calloutType" default="info" type="string">
      **Options:** `'info'`, `'success'`, `'warning'`, `'error'`
    </ParamField>

    <ParamField path="icon" type="string">
      Optional FontAwesome icon
    </ParamField>
  </Tab>

  <Tab title="keyValue">
    <ParamField path="type" type="string" required>
      Must be `'keyValue'`
    </ParamField>

    <ParamField path="items" type="table" required>
      Array of rows with `label`, `value`, and optional `progress`, `progressColor`, or `colorScheme`
    </ParamField>
  </Tab>

  <Tab title="image">
    <ParamField path="type" type="string" required>
      Must be `'image'`
    </ParamField>

    <ParamField path="src" type="string" required>
      Image URL
    </ParamField>

    <ParamField path="alt" type="string">
      Alt text
    </ParamField>

    <ParamField path="caption" type="string">
      Optional caption (supports markdown)
    </ParamField>
  </Tab>

  <Tab title="divider">
    <ParamField path="type" type="string" required>
      Must be `'divider'`
    </ParamField>
  </Tab>
</Tabs>

**Example:**

```lua theme={null}
sections = {
    {
        type = 'callout',
        calloutType = 'warning',
        label = 'Partial match',
        description = 'Sample needs lab confirmation',
    },
    {
        type = 'keyValue',
        items = {
            { label = 'Blood type', value = 'O+' },
            { label = 'DNA match', value = '72%', progress = 72, progressColor = '#F59E0B' },
        },
    },
    { type = 'divider' },
    {
        type = 'text',
        content = 'Found near the **north entrance**.',
    },
}
```

### Actions

Footer buttons for player interaction. Each button can fire a client or server event with optional data.

<ParamField path="label" type="string" required>
  Button text (e.g. `'Close'`, `'Submit'`, `'Confirm'`)
</ParamField>

<ParamField path="icon" type="string">
  Optional FontAwesome icon
</ParamField>

<ParamField path="variant" default="default" type="string">
  Button style

  **Options:** `'default'`, `'primary'`, `'destructive'`
</ParamField>

<ParamField path="event" type="string">
  Client event to trigger on click
</ParamField>

<ParamField path="serverEvent" type="string">
  Server event to trigger on click
</ParamField>

<ParamField path="args" type="table">
  Data passed to `event` or `serverEvent`

  ```lua theme={null}
  args = { caseId = 4421, evidenceId = 'blood_01' }
  ```
</ParamField>

<ParamField path="close" default="true" type="boolean">
  Close the drawer after the button is clicked

  Set to `false` to fire the event and keep the drawer open (e.g. a refresh action)
</ParamField>

<Note>
  Footer `args` are defined by your script when opening the drawer - the player does not type new data into the panel. Closing via X or Escape only notifies Lua that the drawer closed; no custom args are returned.
</Note>

## Preview

<Frame>
  <img src="https://mintcdn.com/lationscripts/Ti0acW9JT3q4BC3Y/resources/modern-ui/components/drawer/example.webp?fit=max&auto=format&n=Ti0acW9JT3q4BC3Y&q=85&s=01f9fc9d6991f8180f0206e9aba80c68" alt="Drawer Example" width="868" height="1640" data-path="resources/modern-ui/components/drawer/example.webp" />
</Frame>