# demo-toggle — Examples

## initial

```html
<demo-toggle-ui label-on="With trait" label-off="Without trait" initial="off">
  <div slot="off" style="padding:var(--a-space-4);text-align:center;color:var(--a-fg-muted);">Bare surface — no trait attached.</div>
  <div slot="on" style="padding:var(--a-space-4);text-align:center;color:var(--a-fg);">Same surface, with trait attached.</div>
</demo-toggle-ui>
```

## labelOn / labelOff

```html
<demo-toggle-ui label-on="With shimmer-loading" label-off="Without shimmer-loading">
  <div slot="off" style="padding:var(--a-space-4);">Placeholder content (no trait)</div>
  <div slot="on" style="padding:var(--a-space-4);">Placeholder content (shimmer active)</div>
</demo-toggle-ui>
```
