Views

A view is one element of a panel. The + menu groups them in three sections:

Group	Views
Layout	VStack, HStack, ZStack, Spacer, Divider
Controls	Button, Toggle, Slider, Stepper, Text Field, Segmented Control
Display	Label, Image, Shape, Progress View, Web View

Selecting a view shows its inspector, top to bottom:

• Identity – the view's Name
• Layout – sizing, max width and height, padding and offset (see Layout & Sizing)
• a section for the view's kind, described on this page
• Appearance Overrides – colours, font, shape, border, shadow, opacity (see Styling)
• State – Hidden and Disabled
• Accessibility – a Label that VoiceOver reads for the view

Name the views you'll refer to

Give a view a Name when an event or a script needs to find it. The name replaces the generated one in the hierarchy and in the trigger's view picker, so "Buy Button" is easy to tell apart from "Button – Buy" and two other buttons. Scripts look views up by the same name.

Label

Text. The label's text field turns into a multi-line editor while Wraps Text is on.

• Text – any length. Supports markdown and live variable values.
• Wraps Text – on (the default) lets the text flow onto as many lines as it needs. Off keeps it on one line and ends it with "…" when it doesn't fit.
• Text Alignment – Leading, Center or Trailing. Visible only when the label is wider than its text: wrapped text, or a Fill-sized label.
• Text Transform – None, Uppercase, Lowercase or Capitalize. The stored text stays as you typed it.

A label's text is 15 pt system font in the panel's light text colour until you set a Font and Foreground in Appearance Overrides.

Button

A tappable button.

• Style – Primary (filled blue, white text), Secondary (a soft grey fill with blue text), Destructive (filled red) or Custom (no fill, blue text, ready for your own overrides). See Styling.
• Title – the button's text. Remove it for an icon-only button.
• Icon – an image from the asset library, drawn before the title.
• Icon Size – the size the icon is drawn at, default 14 pt. Shown once an icon is set.

A button with a title starts with 8 pt top and bottom and 12 pt side padding. Pressing a button gives a short shrink as feedback.

Toggle

An on/off control, in one of two styles:

• Switch – a standard switch, with the Title as a label beside it.
• Custom – a button-shaped control that changes its look when switched on. Its title, image and style can differ between off and on, so one toggle can read "Show Measurements" when off and "Hide Measurements" when on.

Settings:

• Style – Switch or Custom.
• Default On – the position the toggle starts in. People can flip it; this only sets the start.
• Title – the text.
• Image – Custom style only; an image from the asset library, drawn before the title.

With Custom selected, an Off / On tab bar appears at the top of the inspector. The tab decides which state the Title, Image and Appearance Overrides apply to, and the canvas shows the toggle in that state. Settings that aren't per state, such as Default On and layout, apply to both. See Styling.

Slider

A draggable control for a number.

• Number Type – Integer snaps to whole numbers; Decimal allows fractions.
• Default Value – where the thumb starts, within the range.
• Range – the minimum and maximum. Typing a minimum above the maximum swaps them.
• Step – optional. When set, the slider snaps to multiples of the step, counted from the minimum – 5 gives 0, 5, 10 and so on. Unset, an Integer slider snaps to 1 and a Decimal slider moves smoothly.

Foreground in Appearance Overrides colours the filled part of the track on iPhone, iPad and Vision Pro. On Mac the slider keeps the system accent colour.

Stepper

Minus and plus buttons around a value.

• Label – optional text shown before the buttons.
• Value – the starting value.
• Step – how much one press adds or removes.
• Range – the minimum and maximum. Each button is greyed out at its end of the range.

The value shows without decimals when the step is a whole number, and with one decimal otherwise.

Text Field

A single line of text input.

• Default Text – text already in the field when the panel appears.
• Placeholder – grey hint text shown while the field is empty.

The field has no border or background of its own; give it a Fill, Border and Shape in Appearance Overrides so people can see where to tap. See Interacting with a panel in the world for how typing works on each device.

Segmented Control

A row of mutually exclusive choices.

• Segments – one row per segment with its title. Add Segment adds one, up to 6; the trash button removes one.
• Default Selected – which segment is selected when the panel appears.

Image

A picture from the asset library.

• Source – the image asset.
• Content Mode – Fit shows the whole image inside the view, leaving empty space if the proportions differ. Fill covers the whole view and crops the edges.

New images start at a fixed 200 × 200 pt, so a large photo doesn't take over the panel. Give an image a Shape to round its corners or crop it to a circle.

Shape

A filled shape for backgrounds, dots, badges and dividers of your own.

• Shape – Rectangle, Rounded (with a corner radius), Capsule or Circle.

Colour it with Fill, and add a Border or Shadow in Appearance Overrides. New shapes are 100 × 100 pt and light grey. A Shape is often the back layer of a ZStack, with text or an icon on top.

Progress View

A progress indicator.

• Determinate – on shows a bar filled to Progress (0 to 1). Off shows a spinning activity indicator instead.

Foreground colours the bar or the spinner.

Web View

A web page inside the panel.

• URL – the page's address.
• Interactive – whether the page takes taps and scrolling.
• Allow Link Navigation – currently has no effect: links behave as they do in a browser whichever way it is set.

A web view has no natural size, so it is Fill or Fixed. Fill in Appearance Overrides shows while the page loads and wherever the page is transparent. On iPhone, iPad and Mac, a web view in a world panel displays but doesn't take touches – see Panels.

VStack, HStack, ZStack, Spacer, Divider

The layout views are described in Layout & Sizing.