# Studio UI reference

> The UI primitives of the Studio's Menu and HUD, their options, style properties and interactions.

Every node of the Menu and HUD is one of these primitives (see
[Menu and HUD](/studio/ui)). Options take expressions; the type says what
the value must be. They compile to the game API's `ui` functions, described
in the [UI reference](/reference/ui).

This page is generated from the Studio's UI catalog.

### Layout

| Primitive | Options |
| --- | --- |
| `stack` | Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `row` | Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `box` | Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `grid` | Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `overlay` | Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `scroll` | Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `spacer` | Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |

### Content

| Primitive | Options |
| --- | --- |
| `text` | Text (`text`, text), Heading level (`heading`, number), Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `richtext` | Text (`text`, text), Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `image` | Image (`asset`, asset), Alternative text (`alt`, text), Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `icon` | Icon (`asset`, asset), Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `shape` | Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |

### Controls

| Primitive | Options |
| --- | --- |
| `button` | Label (`label`, text), Enabled (`enabled`, boolean), Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `link` | Label (`label`, text), Enabled (`enabled`, boolean), Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `form` | Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `input` | Label (`label`, text), Field name (`name`, text), Value (`value`, value), Enabled (`enabled`, boolean), Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `area` | Label (`label`, text), Field name (`name`, text), Value (`value`, value), Enabled (`enabled`, boolean), Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `toggle` | Label (`label`, text), Field name (`name`, text), Checked (`checked`, boolean), Enabled (`enabled`, boolean), Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `slider` | Label (`label`, text), Field name (`name`, text), Value (`value`, value), Enabled (`enabled`, boolean), Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `select` | Label (`label`, text), Field name (`name`, text), Value (`value`, value), Enabled (`enabled`, boolean), Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `option` | Label (`label`, text), Value (`value`, value), Selected (`selected`, boolean), Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |

### Feedback

| Primitive | Options |
| --- | --- |
| `progress` | Label (`label`, text), Value (`value`, value), Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `activity` | Label (`label`, text), Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `status` | Text (`text`, text), Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `alert` | Text (`text`, text), Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |

### Lists and tables

| Primitive | Options |
| --- | --- |
| `list` | Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `item` | Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `table` | Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `header` | Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `body` | Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `footer` | Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `cell` | Text (`text`, text), Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |

### Overlays and tabs

| Primitive | Options |
| --- | --- |
| `modal` | Open (`open`, boolean), Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `popover` | Open (`open`, boolean), Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `tabs` | Value (`value`, value), Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `tab` | Label (`label`, text), Value (`value`, value), Selected (`selected`, boolean), Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `panel` | Value (`value`, value), Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `disclosure` | Label (`label`, text), Open (`open`, boolean), Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |

### Players

| Primitive | Options |
| --- | --- |
| `playerName` | Player (`player`, player), Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `flag` | Player (`player`, player), Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |
| `connection` | Player (`player`, player), Visible (`visible`, boolean), Accessible name (`accessibleName`, text) |

### Style properties

`display`, `direction`, `align`, `justify`, `wrap`, `gap`, `padding`, `margin`, `grow`, `shrink`, `basis`, `width`, `height`, `minWidth`, `maxWidth`, `minHeight`, `maxHeight`, `overflow`, `background`, `color`, `border`, `radius`, `fontSize`, `fontWeight`, `textAlign`, `opacity`

### Interactions

`activate`, `submit`, `input`, `change`, `commit`, `drop`