Set a component prop to $signal:fallback to drive it from a signal. The fallback is the value Django renders on the first load.
<c-lbr.signals $status="success" />
<c-lb.badge variant="$status:success">Active</c-lb.badge>
When $status changes, the badge updates in the browser. The pattern is prop="$signal:fallback". The signal provides the client value and the fallback covers the initial response.
This button reads its colour, size, and style from signals. The controls below change them.
<c-lbr.signals $btn.variant="" $btn.size="md" $btn.btnstyle="" />
<div class="flex flex-col gap-6 items-start w-full md:w-96">
<c-lb.button variant="$btn.variant" size="$btn.size:md" btnStyle="$btn.btnstyle">
Click me — <span data-text="$btn.variant || 'default'"></span>
</c-lb.button>
<c-lb.label floating class="w-full">
<span>Variant</span>
<c-lb.select bind="$btn.variant" size="sm" class="w-full">
<option value="">Default</option>
<option value="primary">Primary</option>
<option value="secondary">Secondary</option>
<option value="accent">Accent</option>
<option value="success">Success</option>
<option value="warning">Warning</option>
<option value="error">Error</option>
</c-lb.select>
</c-lb.label>
<c-lb.label floating class="w-full">
<span>Size</span>
<c-lb.select bind="$btn.size" size="sm" class="w-full">
<option value="xs">xs</option>
<option value="sm">sm</option>
<option value="md">md</option>
<option value="lg">lg</option>
<option value="xl">xl</option>
</c-lb.select>
</c-lb.label>
<c-lb.label floating class="w-full">
<span>Style</span>
<c-lb.select bind="$btn.btnstyle" size="sm" class="w-full">
<option value="">Default</option>
<option value="outline">Outline</option>
<option value="soft">Soft</option>
<option value="ghost">Ghost</option>
<option value="link">Link</option>
</c-lb.select>
</c-lb.label>
</div>
The runtime loads with the prop
A reactive $ prop loads the runtime even when the page has no <c-lbr.signals> or action. You still declare the signal, usually with <c-lbr.signals>, to set its starting value.
Check whether a prop supports it
Only selected props are reactive. The component API tables mark them with a flashlight icon. The Building CSS guide explains how labb includes classes for the prop’s possible values.
The search box, step three
The same search example now has a badge whose colour reads an existing signal.
<c-lbr.signals $filters.q="" $status="idle" $tone="neutral" />
<div class="flex flex-col gap-3 w-full max-w-sm">
<div class="flex items-center gap-2">
<c-lb.input
type="search"
bind="$filters.q"
class="flex-1"
placeholder="Search customers"
data-on:input="$status = $filters.q ? 'searching' : 'idle'; $tone = $filters.q ? 'info' : 'neutral'"
/>
<c-lb.badge variant="$tone:neutral" size="sm">
<span data-text="$status"></span>
</c-lb.badge>
</div>
<c-lb.button
btnStyle="ghost"
size="sm"
class="self-start"
data-show="$filters.q"
data-on:click="$filters.q = ''; $status = 'idle'; $tone = 'neutral'"
>Clear</c-lb.button>
</div>
$tone contains neutral and info, both valid variant values. A reactive prop still needs a value the component accepts.
Continue to Server actions to send the search state to Django and render new results.
Driving several props at once
Props can read nested signals, so one object can provide values to several components. Replace the object to update those values together. Patterns shows the approach and the Reference lists the syntax.
Explore blocks
