Modal

<Button
  {{on "click" this.toggle}}
>
  Open Modal
</Button>

<Modal
  @isOpen={{this.isOpen}}
  @onClose={{this.toggle}}
  as |m|
>
  <m.Header>Title</m.Header>
  <m.Body>
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </m.Body>
  <m.Footer>
    <Button
      @appearance="minimal"
      class="mr-4"
      {{on "click" this.toggle}}
    >
      Cancel
    </Button>
    <Button
      @intent="primary"
      disabled={{this.isLoading}}
      {{on "click" this.save}}
    >
      {{if this.isLoading "Loading..." "Save"}}
    </Button>
  </m.Footer>
</Modal>

{{#each this.sizes as |size|}}
  <Button
    {{on "click" (fn this.toggle size)}}
  >
    Open {{size}}
  </Button>
{{/each}}

<Modal
  @isOpen={{this.isOpen}}
  @size={{this.size}}
  @onClose={{this.toggle}}
  as |m|
>
  <m.Header>Title</m.Header>
  <m.Body>
    <p>
      Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.
    </p>
    <p>
      Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
    </p>
  </m.Body>
  <m.Footer>
    <Button
      @appearance="minimal"
      class="mr-4"
      {{on "click" this.toggle}}
    >
      Close
    </Button>
  </m.Footer>
</Modal>