UI Button

Inputs

positionvec2

Button's position in normalized screen space: where (0, 0) is the top-left corner and (1, 1) is the bottom-right corner. The horizontal placement of a button should depend on both its scale and the length of its label. The longer the button text, the further it should be positioned away from the screen edges to ensure proper visibility and layout. For example, a button with the label "Button" and scale 0.75 can be positioned within X bounds of 0.15 to 0.85. However, if the label is longer ("Hello World") with the same scale (0.75), the allowed bounds should be reduced to 0.2-0.8 to prevent the text from getting too close to or overflowing beyond the screen edges.

rotationint

Rotation of the button. Range from 0 to 360

scalefloat

Uniform scale factor applied to the button. Default value: 1.0; 1 - normal size; 2 - large button; 0.5 - small button.

shapeTypeint

Shape of the button, where 0 - pill shape (rounded rectangle) and 1 - circle shape

roundnessfloat

Defines the roundness of the button when using the pill-style button. 0 - rectangular button without rounded corners (a standard rectangle) 1 - pill-shaped button with fully rounded edges

paddingXfloat

Horizontal padding for the button background. Accepts values in the range [0 … 0.5]. 0 means the background width tightly matches the text width (no horizontal padding). 0.5 creates a wide button with maximum horizontal padding. This parameter applies only to pill-shaped buttons. Use the default value: 0.15

paddingYfloat

Vertical padding for the button background. Accepts values in the range [0 … 0.05]. 0 means the background height exactly matches the text height (no vertical padding). This parameter applies only to pill-shaped buttons. Use default value: 0.025

circlePaddingfloat

Padding around the button content for circle-shaped buttons. Accepts values in the range [0 … 0.5]. 0 means the background tightly fits the text (no padding). Higher values increase the size of the circular background by adding more space around the content. This parameter applies only to circle-shaped buttons. Recommended value: 0.04

backgroundColorvec4

Defines the button’s normal state color

backgroundPressedColorvec4

Defines the color while the button is actively being pressed (between pointer down and release).

backgroundDisabledColorvec4

Defines the color when the button is inactive and cannot be interacted with.

outlineThicknessfloat

Thickness of the button background outline. Accepts values in the range [0 … 1]. 0 means no visible outline.

outlineColorvec4

Button background outline color

textColorvec4

Color of the text

fontint

An integer value between 0 and 14 where each font is a style according to this list:

15 values

0

Clean & Modern – Tight, precise sans-serif; ideal for technical, minimalist, or professional contexts.

1

Sturdy Serif – Solid slab-serif with a techy edge; great for editorial, data-heavy, or trustworthy content.

2

Futuristic – Geometric and sci-fi; perfect for tech, space, gaming, or futuristic themes.

3

Friendly & Rounded – Soft geometric sans-serif; versatile and approachable for modern UI or casual content.

4

Bold & Urban – Strong, geometric sans-serif; suited for fashion, branding, and impactful headlines.

5

Sharp & Condensed – Narrow and angular with a South Asian-inspired touch; works well for action, gaming, or compact headers.

6

Pixel Retro – Bitmap/pixel-style font; evokes retro computing, arcade games, and digital nostalgia.

7

Sci-Fi Technical – Clean, angular, futuristic; ideal for HUDs, dashboards, and space or cyber themes.

8

Contemporary Techy – Modern grotesque with quirky character; great for startups, tech brands, and editorial.

9

8-Bit Arcade – Classic pixel/retro game font; perfect for gaming, nostalgia, and chiptune aesthetics.

10

Bold Display – Wide, inline-striped display font; eye-catching for posters, signage, and street-style graphics.

11

Western Vintage – Ornate slab-serif with Old West character; suited for rustic, saloon, or vintage themes.

12

Cartoonish & Punchy – Chunky, inline retro cartoon font; fun and loud for comics, games, or kids’ content.

13

Gothic Blackletter – Medieval blackletter style; dramatic and ornate for gothic, metal, or historical themes.

14

Tall & Strong – All-caps condensed sans-serif; bold and cinematic for headlines, posters, and sports content.

labelstring

Button label - the text displayed on the button

interactionEnabledboolean

Whether the button responds to touch. When false, taps are ignored and the disabled background color is used.

Events

onTap

triggered when the user quickly taps (presses and releases) an button to perform an action.

onPressStart

The event that is triggered when a press interaction begins

onPressEnd

The event that is triggered when a press interaction ends

More in Games & Interactivity

• JoystickAdds an on-screen joystick that you drag to move or steer something in the Lens. Choose where it sits, how big it is, and how it looks.
• LeaderboardSaves the scores from your Lens and shows them in a ranked list. You can compare with friends and with people around the world.
• Physics2DMakes 2D objects fall, collide and bounce off each other like real things. It draws nothing itself, so the Lens needs something else to show the objects.
• QuizRuns a quiz on the screen, with buttons or a tilt of your head to answer. Say what the quiz is about, for example American history or your personality type.
• Tic Tac ToeAdds tic tac toe on a 3D board, for one player against the Lens. Choose the look of the board and the two 3D pieces.
• Turn ManagerRuns a two player game that you send to a friend. You take a turn, then your friend opens the Lens and takes the next one.
• UI Progress BarShows a bar that fills up to track progress, for a countdown, a timer or a level. You choose the size, the colors and up to three checkpoint marks.
• UI SliderAdds a bar you drag to set a value, for example how strong an effect is. The bar is horizontal, and you choose its size and colors.
• Video Control UIPlays your videos full screen, one after another, with play, pause and a bar you can drag. You add up to five videos.
• What X Are You?Spins through options above your head and stops on one, for example a star sign or a persona. You give up to six options, as text, pictures or both.