Shared options

Several options work the same way in every component. They're described once here and linked from each component page.

Every export on the component pages is a client export: call it as exports.lation_ui:name(...) from a client script. The exceptions are getServerTheme and setServerTheme, and notifications, which the server can send through an event.

The exports that wait for the player (alert, input, progressBar and the minigames) return only when the player is done, so call them from a thread, a command or an event handler, never from a loop that must keep running.

IconsCopy Anchor Link

lation ui bundles the free Font Awesome 6 solid, regular and brands icons. Pass an icon as a class string:

icon = 'fas fa-wrench'   -- solid
icon = 'far fa-bell'     -- regular
icon = 'fab fa-discord'  -- brands

The class string works everywhere. Most components also take a bare solid icon name such as 'wrench', but the alert dialog's icon needs the class string.

Context menus, list menus and the radial menu also take an image URL as an icon. Any value that contains ://, .png, .webp, .jpg, .jpeg, .gif or .svg is drawn as an image.

Icon animationsCopy Anchor Link

Fields named iconAnimation (and headerIconAnimation on context menus) take one of these Font Awesome animations:

ColorsCopy Anchor Link

Per-call colors such as iconColor, progressColor or badgeColor take any CSS color string, for example '#EF4444' or 'rgb(239, 68, 68)'. Two exceptions:

• Notification bgColor, txtColor and titleColor take six-digit hex (#RRGGBB) only. Anything else is ignored and the theme colors are used.
• Text UI bgColor is drawn exactly as passed, so it ignores the theme's panel opacity.

When you don't pass a color, the component uses the theme. On a light theme such as Paper or Poster, the colors you pass are drawn 30% darker so they still read on a light panel; on a dark theme they're drawn exactly as passed. A notification or text UI with its own bgColor always keeps them as passed.

Text formattingCopy Anchor Link

Most text fields take a small set of Markdown:

These fields take it:

Progress bars, input dialogs, the radial menu and the minigames show text as written.

PositionsCopy Anchor Link

The progress bar always sits at the bottom center of the screen, and alert and input dialogs in the middle.

A convar override replaces the position for every call to that component, whatever the script passes. Set it with setr; see convars.

Notifications also take top-center and bottom-center as older names for top and bottom. An unknown notification position, passed or set in the convar, falls back to top-right.