Alert Dialog

Alert dialogs can be used for confirmations, warnings, informational messages and more.

Options

OptionTypeRequiredDefaultDescription
headerstringNo*nilThe dialog header text
contentstringNo*nilThe main content text
iconstringNonilFontAwesome icon class
iconColorstringNo'#71717A'Icon color (hex)
labelstableNo{}Button labels: { cancel = 'Cancel', confirm = 'Confirm' }
typestringNo'default'Dialog type: 'default', 'success', 'destructive'
sizestringNo'md'Dialog size: 'xs', 'sm', 'md', 'lg'
cancelbooleanNotrueWhether to show cancel button

*Either header or content is required.

Return Values

  • 'confirm' - User clicked confirm
  • 'cancel' - User clicked cancel or closed dialog

Example

local result = exports.lation_ui:alert({
    header = 'Delete Item',
    content = 'Are you sure you want to delete this item?',
    icon = 'fas fa-trash',
    iconColor = '#EF4444',
    type = 'destructive',
    labels = {
        confirm = 'Delete',
        cancel = 'Keep'
    }
})
 
if result == 'confirm' then
    print('Item deleted!')
end


Input Dialog

Input dialogs provide forms with various field types for collecting user data.

Dialog Options

OptionTypeRequiredDefaultDescription
titlestringNonilDialog title
subtitlestringNonilDialog subtitle
submitTextstringNo'Submit'Submit button text
cancelTextstringNo'Cancel'Cancel button text
typestringNo'default'Dialog type: 'default', 'success', 'destructive'
optionstableYes{}Array of input fields

Field Options

OptionTypeRequiredDefaultDescription
typestringYesnilField type: 'input', 'number', 'toggle', 'checkbox', 'select', 'multi-select', 'slider', 'textarea'
labelstringYesnilField label
descriptionstringNonilField description
placeholderstringNonilPlaceholder text
iconstringNonilFontAwesome icon class
iconColorstringNo'#71717A'Icon color (hex)
requiredbooleanNofalseWhether field is required
disabledbooleanNofalseWhether field is disabled
minnumberNonilMinimum value (number/slider)
maxnumberNonilMaximum value (number/slider)
stepnumberNo1Step value (number/slider)
unitstringNonilUnit label (slider)
optionstableNo{}Options for select/multi-select
defaultanyNonilDefault field value
checkedbooleanNonilAlias for default on toggle/checkbox types

Notes:

  • 'checkbox' is an alias for 'toggle' - both render the same component.
  • 'checked' is an alias for 'default' on toggle/checkbox types.

Return Values

  • Table of values (indexed by field order) or nil if cancelled

Example

local result = exports.lation_ui:input({
    title = "User Profile",
    subtitle = "Enter your information",
    submitText = "Save",
    options = {
        {
            type = 'input',
            label = 'Username',
            description = 'Input your username below',
            placeholder = 'IamLation',
            icon = 'fas fa-user',
            required = true
        },
        {
            type = 'number',
            label = 'Age',
            description = 'Input your age below',
            icon = 'fas fa-birthday-cake',
            required = true,
            default = 18
        },
        {
            type = 'select',
            label = 'Country',
            description = 'Select your country',
            icon = 'fas fa-globe',
            options = {
                { label = 'United States', value = 'us' },
                { label = 'Canada', value = 'ca' },
                { label = 'United Kingdom', value = 'uk' },
                { label = 'Australia', value = 'au' }
            }
        },
        {
            type = 'toggle',
            label = 'Receive Notifications',
            description = 'Toggle notifications on or off',
            icon = 'fas fa-bell',
            default = true
        },
        {
            type = 'slider',
            label = 'Volume',
            description = 'Adjust the volume level',
            icon = 'fas fa-volume-up',
            min = 0,
            max = 100,
            unit = '%',
            default = 50
        }
    }
})
 
if result then
    print('Username:', result[1])
    print('Age:', result[2])
    print('Country:', result[3])
    print('Notifications:', result[4])
    print('Volume:', result[5])
end


Context menus provide navigation and action selection with hierarchical support.

Registration Options

OptionTypeRequiredDefaultDescription
idstringYesnilUnique menu identifier
titlestringNonilMenu title
subtitlestringNonilMenu subtitle
menustringNonilParent menu ID (for back navigation)
canClosebooleanNotrueWhether menu can be closed with ESC
optionstableYes{}Array of menu options

Option Properties

OptionTypeRequiredDefaultDescription
titlestringYesnilOption display text
iconstringNonilFontAwesome icon class
iconColorstringNo'#71717A'Icon color (hex)
iconAnimationstringNonilIcon animation: 'spin', 'spinPulse', 'spinReverse', 'pulse', 'beat', 'fade', 'beatFade', 'bounce', 'shake',
descriptionstringNonilOption description
keybindstringNonilKeybind display text
disabledbooleanNofalseWhether option is disabled
readOnlybooleanNofalseWhether option is read-only (no click)
menustringNonilSubmenu ID to open
arrowbooleanNofalseShow arrow indicator (auto-set for submenus)
progressnumberNonilProgress bar value (0-100)
progressColor or colorSchemestringNo'#3B82F6'Progress bar color (hex)
imagestringNonilURL to an image displayed in the hover metadata
metadatatableNonilAdditional information displayed on hover (see Metadata)
onSelectfunctionNonilCallback function
eventstringNonilClient event to trigger
serverEventstringNonilServer event to trigger
argsanyNonilArguments for events

Metadata

The metadata property displays additional information in a hover card. It supports three formats:

String Array

metadata = {
    "Additional info line 1",
    "Additional info line 2", 
    "Additional info line 3"
}

Key-Value Object

metadata = {
    ["Property 1"] = "Value 1",
    ["Property 2"] = "Value 2",
    ["Status"] = "Active"
}

Structured Array (Recommended)

metadata = {
    { label = "Health", value = "85%" },
    { label = "Armor", value = "100%" },
    { label = "Experience", value = "1,250 XP", progress = 75, progressColor = "#3B82F6" },
    { label = "Level Progress", value = "3/4", progress = 75, progressColor = "#10B981" }
}

Metadata Item Properties

PropertyTypeRequiredDescription
labelstringYesThe label text
valueanyYesThe value to display
progressnumberNoProgress bar value
progressColor or colorSchemestringNoProgress bar color (hex)

Functions

-- Register a menu
exports.lation_ui:registerMenu(menuData)
 
-- Show a registered menu
exports.lation_ui:showMenu(menuId)
 
-- Hide the current menu
exports.lation_ui:hideMenu()
 
-- Get the currently open menu ID
local menuId = exports.lation_ui:getOpenMenu()

Example

-- Register main menu
exports.lation_ui:registerMenu({
    id = 'main_menu',
    title = 'Game Menu',
    subtitle = 'Select an option',
    options = {
        {
            title = 'Profile',
            description = 'View your profile',
            icon = 'fas fa-user',
            iconColor = '#3B82F6',
            menu = 'profile_menu',
            image = 'https://example.com/avatar.jpg',
            metadata = {
                { label = "Level", value = "42" },
                { label = "Experience", value = "1,250 XP", progress = 75, progressColor = "#3B82F6" },
                { label = "Reputation", value = "Good Standing" },
                { label = "Playtime", value = "120 hours" }
            }
        },
        {
            title = 'Settings',
            description = 'Game settings',
            icon = 'fas fa-cog',
            iconColor = '#6B7280',
            onSelect = function()
                print('Opening settings...')
            end
        },
        {
            title = 'Health',
            description = 'Current health status',
            icon = 'fas fa-heart',
            iconColor = '#EF4444',
            progress = 85,
            progressColor = '#EF4444',
            readOnly = true
        }
    }
})
 
-- Register submenu
exports.lation_ui:registerMenu({
    id = 'profile_menu',
    title = 'Profile',
    menu = 'main_menu', -- Back to main menu
    options = {
        {
            title = 'Edit Profile',
            icon = 'fas fa-edit',
            event = 'openProfileEditor'
        },
        {
            title = 'View Stats',
            icon = 'fas fa-chart-bar',
            serverEvent = 'getPlayerStats'
        }
    }
})
 
-- Show the menu
exports.lation_ui:showMenu('main_menu')


Notification

Notifications with customizable positioning, styling and more.

Options

OptionTypeRequiredDefaultDescription
titlestringNonilNotification title
messagestringYes*nilNotification message
typestringNo'info'Type: 'info', 'success', 'warning', 'error'
durationnumberNo5000Duration in milliseconds
positionstringNo'top-right'Position: 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right', 'center'
iconstringNonilFontAwesome icon class
iconColorstringNoAutoIcon color (hex)
bgColorstringNoAutoBackground color (hex)
txtColorstringNoAutoText color (hex)

*Either title or message is required.

Example

exports.lation_ui:notify({
    title = 'Success',
    message = 'Profile updated successfully',
    type = 'success',
})
 
exports.lation_ui:notify({
    title = 'Error',
    message = 'Failed to save changes',
    type = 'error',
})
 
exports.lation_ui:notify({
    title = 'Warning',
    message = 'Your session is about to expire',
    type = 'warning',
})
 
exports.lation_ui:notify({
    title = 'Info',
    message = 'New features are now available',
    type = 'info',
})
 
exports.lation_ui:notify({
    message = 'A notification with only a message',
})
 
exports.lation_ui:notify({
    title = 'Custom',
    message = 'A notification with custom styles',
    bgColor = '#e35c5c',
    icon = 'fas fa-screwdriver-wrench',
    iconColor = '#3a3a3a',
    txtColor = '#e5e5e5',
})
 
exports.lation_ui:notify({
    title = 'Custom',
    message = 'A notification with custom styles',
    bgColor = '#bd71f2',
    icon = 'fas fa-bars',
    iconColor = '#3a3a3a',
    txtColor = '#e5e5e5',
})


Skill Check

Interactive skill check mini-game with configurable difficulty.

Options

OptionTypeRequiredDefaultDescription
titlestringYesnilTitle for skill check
difficultystring/tableYesnilDifficulty level or array of difficulties
inputstableNo{'W', 'A', 'S', 'D'}Array of input keys

Difficulty Levels

  • 'easy' - Large target area, slow speed
  • 'medium' - Medium target area, medium speed
  • 'hard' - Small target area, fast speed
  • Custom object: { areaSize = 20, speedMultiplier = 1.5 }

Functions

-- Start skill check
local success = exports.lation_ui:skillCheck(title, difficulty, inputs)
 
-- Cancel active skill check
exports.lation_ui:cancelSkillCheck()
 
-- Check if skill check is active
local isActive = exports.lation_ui:skillCheckActive()

Return Values

  • true - All skill checks completed successfully
  • false - Failed or cancelled

Example

local success = exports.lation_ui:skillCheck('Lockpick', {'easy', 'easy', 'easy', 'easy'}, {'W', 'A', 'S', 'D'})
 
if success then
    print('Success')
else
    print('Failed')
end
 
-- Custom difficulty
local success = exports.lation_ui:skillCheck('Lockpick', {
    { areaSize = 15, speedMultiplier = 2.0 },
    { areaSize = 10, speedMultiplier = 2.5 }
})


Progress Bar

Progress bar with optional multi-step feature & more.

Options

OptionTypeRequiredDefaultDescription
labelstringYesnilProgress bar label
descriptionstringNonilProgress description (overridden by steps)
durationnumberYesnilDuration in milliseconds
iconstringNonilFontAwesome icon class
iconColorstringNo'#71717A'Icon color (hex)
iconAnimationstringNonilIcon animation: 'spin', 'spinPulse', 'spinReverse', 'pulse', 'beat', 'fade', 'beatFade', 'bounce', 'shake'
colorstringNo'#3B82F6'Progress bar color (hex)
stepstableNo{}Array of step objects with descriptions
canCancelbooleanNotrueWhether progress can be cancelled with X key
useWhileDeadbooleanNofalseAllow progress while player is dead
allowRagdollbooleanNofalseAllow progress while player is ragdolled
allowCuffedbooleanNofalseAllow progress while player is cuffed
allowFallingbooleanNofalseAllow progress while player is falling
allowSwimmingbooleanNofalseAllow progress while player is swimming
animtableNonilSee “Animations” below
proptableNonilSee “Props” below
disabletableNonilControls to disable during progress

Animations

OptionTypeRequiredDefaultDescription
dictstringNo*nilAnimation dictionary
clipstringYesnilAnimation clip name
flagnumberNo49Animation flags
blendInnumberNo3.0Blend in speed
blendOutnumberNo1.0Blend out speed
durationnumberNo-1Animation duration (-1 for loop)
playbackRatenumberNo0Playback rate
lockXbooleanNofalseLock X axis
lockYbooleanNofalseLock Y axis
lockZbooleanNofalseLock Z axis
scenariostringNo*nilScenario name (alternative to dict/clip)
playEnterbooleanNotruePlay enter animation for scenarios

*Either dict or scenario is required if using animations.

Props

OptionTypeRequiredDefaultDescription
modelstringYesnilProp model hash
bonenumberNo60309Bone index to attach to
postableYesnilPosition offset {x, y, z}
rottableYesnilRotation offset {x, y, z}
rotOrdernumberNo0Rotation order

Disable

OptionTypeDefaultDescription
movebooleanfalseDisable player movement
sprintbooleanfalseDisable sprinting only
carbooleanfalseDisable vehicle controls
combatbooleanfalseDisable combat actions
mousebooleanfalseDisable mouse look

Functions

-- Show progress bar
local success = exports.lation_ui:progressBar(data)
 
-- Check if progress is active
local isActive = exports.lation_ui:progressActive()
 
-- Cancel active progress
exports.lation_ui:cancelProgress()

Return Values

  • progressBar(): true if completed, false if cancelled/failed
  • progressActive(): true if progress is active, false otherwise

Example

-- Basic progress bar
if exports.lation_ui:progressBar({
    label = 'Submitting',
    description = 'Please wait while we process your data...',
    duration = 5000,
    icon = 'fas fa-download',
}) then print('Progress completed') else print('Cancelled/incomplete') end
-- Progress with multi-step feature
if exports.lation_ui:progressBar({
    label = 'Initializing Hack',
    duration = 10000,
    icon = 'fas fa-crosshairs',
    iconColor = '#EF4444',
    color = '#EF4444',
    steps = {
        { description = 'Connecting to server...' },
        { description = 'Bypassing security protocols...' },
        { description = 'Establishing secure connection...' },
        { description = 'Hack in progress...' }
    }
}) then print('Progress completed') else print('Cancelled/incomplete') end
-- Progress with animation and props
if exports.lation_ui:progressBar({
    label = 'Robbing Store',
    description = 'Looting cash from the register...',
    duration = 30000,
    icon = 'fas fa-money-bill-wave',
    iconColor = '#10B981',
    color = '#10B981',
    useWhileDead = false,
    disable = { 
        car = true,
        move = true,
        combat = true
    },
    anim = {
        dict = 'anim@heists@ornate_bank@grab_cash',
        clip = 'grab'
    },
    prop = {
        model = 'p_ld_heist_bag_s',
        bone = 40269,
        pos = vec3(0.0454, 0.2131, -0.1887),
        rot = vec3(66.4762, 7.2424, -71.9051)
    }
}) then print('Progress completed') else print('Cancelled/incomplete') end


Text UI

Contextual text displays with markdown support, icons, and keybind indicators.

Options

OptionTypeRequiredDefaultDescription
titlestringNonilText UI title
descriptionstringYes*nilMain text content (supports markdown)
positionstringNo'center-left'Position: 'top-left', 'top-center', 'top-right', 'center-left', 'center', 'center-right', 'bottom-left', 'bottom-center', 'bottom-right'
iconstringNonilFontAwesome icon class
iconColorstringNo'#71717A'Icon color (hex)
iconAnimationstringNonilIcon animation: 'spin', 'spinPulse', 'spinReverse', 'pulse', 'beat', 'fade', 'beatFade', 'bounce', 'shake',
keybindstringNonilKeybind text to display

*Either title or description is required.

Markdown

  • Bold text: **text**
  • Italic text: *text*
  • Code text: `text`
  • Line breaks: \n

Functions

-- Show text UI
exports.lation_ui:showText(data)
 
-- Hide text UI
exports.lation_ui:hideText()
 
-- Check if text UI is open
local isOpen, displayText = exports.lation_ui:isOpen()

Return Values

  • isOpen(): isOpen (boolean), displayText (string or nil)

Example

-- Basic text UI
exports.lation_ui:showText({
    description = 'This is a *simple* message with **formatting**'
})
-- Customized text UI prompt
exports.lation_ui:showText({
    title = 'Interaction Available',
    description = 'Press to interact with this object',
    keybind = 'E',
    icon = 'fas fa-hand-paper',
    iconColor = '#3B82F6'
})
-- Check if text UI is open
local isOpen, text = exports.lation_ui:isOpen()
if isOpen then
    print('Text UI is open & currently displaying:', text)
end