Toggle

A settings switch with its label: the knob stretches as it slides, the track fills with the accent, and it slides back. In a page, a click turns it on and off.

ui/toggle
UI
cta
Overlay with alpha
2.4 s (2.4–2.4 s)

Toggle at 16:9 — Playing live with volito/browser, the engine a render uses. Each tab lays the item out again for that shape, not a crop. The graphic is transparent; the grey stands in for your footage.

Try it live

In a page it is a live element: each state plays its stretch of the timeline, and hover and click switch them. Your code sets the rest with player.state. See Interactive states.

Toggle

Click to switch it.

state: …

<script type="module" src="https://cdn.jsdelivr.net/npm/volito/dist/player.js"></script>
<volito-player item="ui/toggle" aspect="1000x500" ground="none" props='{"label":"Notifications"}'></volito-player>

State	Plays	Then
`enter`	once	`off`
`off`	hold	stays
`on`	once	stays
`turning-off`	once	`off`

Page events: click(off|turning-off): on; click(on): turning-off

Render it

npx volito render ui/toggle --prop label="Notifications" --prop hint="Get a ping when a render finishes" --out toggle.mov

That writes ProRes 4444 with alpha, ready to drop over footage. The same item in another shape, brand or format:

volito render ui/toggle --aspect 9:16 --style cobalt --out toggle-9x16.mov
volito render ui/toggle --format mp4 --out toggle.mp4
volito still ui/toggle --t 1.2 --out toggle.png
volito info ui/toggle     # every prop and part
volito add ui/toggle      # copy its source into ./motion to edit

From Node:

import { findItem, renderVideo } from "volito";

await renderVideo(findItem("ui/toggle"), { props: { label: "Notifications", hint: "Get a ping when a render finishes" }, out: "toggle.mov" });

Or ask an agent with the MCP server connected: “Render the Volito toggle (ui/toggle) in 9:16, in our brand.”

Props

Set each with --prop name=value, or all at once with --props and a JSON object.

Prop	Type	Default	Takes
`label`	text	Notifications	≤ 24 chars
`hint` empty for none	text	Get a ping when a render finishes	≤ 44 chars

Tags: ui, toggle, switch, settings, on off, interactive, micro-interaction, product, web

More in UI

Button

A product button with every state: it springs in, breathes while idle, lifts on hover, presses, spins while it loads and lands on a check with the done label. In a page, <volito-player> plays each state on hover and click.

Like

A heart and its count: it breathes while idle, pops full with a burst when liked as the count rolls up by one, and empties again when unliked. In a page, a click likes and unlikes.

Loader

A status card that waits, then ends one of two ways: a spinner turns while the line says what is happening, then it closes into a ring with a check, or turns into a cross with a shake. In a page, your code sets the state when the work finishes.

Notification bell

A bell that rings: it swings on its hook, a badge pops in with the count, and it clears when read. In a page, hovering rings it and a click marks it read.