Objects {#if context} Table

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="#">
        <Body size="s" color="light">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(--ink);
    padding: var(--spacing-s) var(--spacing-m);
    margin: auto 0px;
    align-items: center;
    cursor: pointer;
  }

li:hover {
    background-color: var(--grey-2);
  }

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