NUI / Components / Common

Rectangle

ImplementedCommon / Display

Rectangle renders a filled rectangle with optional border and rounded corners.

Supported as a visual primitive.

Overview

Rectangle renders a filled rectangle with optional border and rounded corners.

When to use

Background plates.
Bars.
Selection indicators.
Simple visual blocks.

Children

Does not support children.

Basic syntax

nui

Rectangle Highlight {
    width: 160
    height: 4
    color: "#4AA3FF"
}

Supported properties

Property	Type	Required	Default	Description
`color`	color	No	Default	Fill color.
`backgroundColor`	color	No	Default	Fill color alias used by visual components.
`borderColor`	color	No	Transparent	Border color.
`borderThickness`	number	No	0	Border thickness.
`radius`	number	No	0	Corner radius.
`width`	number	No	Auto	Desired width.
`height`	number	No	Auto	Desired height.
`minWidth`	number	No	Unset	Minimum width.
`minHeight`	number	No	Unset	Minimum height.
`maxWidth`	number	No	Unset	Maximum width.
`maxHeight`	number	No	Unset	Maximum height.
`opacity`	number	No	1	Render opacity.
`layer`	integer	No	Context default	Layer order inside layered parents.
`visible`	bool	No	true	Visibility flag.

Contextual properties

Contextual property rules

Rectangle may receive stack, canvas, grid, wrap, or ExpandableArea slot properties only when it is authored as a direct child of the matching parent. See section 7.

Full syntax example

nui

Rectangle Highlight {
    color: "#4AA3FF"
    borderColor: "#B6D7FF"
    borderThickness: 1
    radius: 3
    width: 160
    height: 4
    minWidth: 80
    minHeight: 2
    maxWidth: 260
    maxHeight: 8
    opacity: 1
    layer: 1
    visible: true
}

Limitations

Rectangle is childless. Use Border when visual framing must contain content.