Objects {#if context} Tables

addToText(readableBinding)}>{readableBinding}

{/if} {#if instance} Components

addToText(readableBinding)}>{readableBinding}

{/if}

Data binding Binding connects one piece of data to another and makes it dynamic. Click the objects on the left, to add them to the textbox.

<div class="controls">
      <a href="https://docs.budibase.com/design/binding">
        <Body small grey>Learn more about binding</Body>
      </a>
      <Button on:click={cancel} secondary>Cancel</Button>
      <Button on:click={close} primary>Done</Button>
    </div>
  </div>
</div>

li {
    display: flex;
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    color: var(--grey-7);
    padding: var(--spacing-s) 0;
    margin: auto 0px;
    align-items: center;
    cursor: pointer;
  }

li:hover {
    color: var(--ink);
    font-weight: 500;
  }

li:active {
    color: var(--blue);
  }
</style>