<button
  aria-haspopup="dialog"
  class="sky-btn sky-btn-default sky-margin-inline-sm ok-confirm-btn"
  type="button"
  (click)="openOKConfirm()"
>
  OK confirm
</button>

<button
  aria-haspopup="dialog"
  class="sky-btn sky-btn-default sky-margin-inline-sm two-action-confirm-btn"
  type="button"
  (click)="openTwoActionConfirm()"
>
  Confirm with two actions
</button>

<button
  aria-haspopup="dialog"
  class="sky-btn sky-btn-default sky-margin-inline-sm"
  type="button"
  (click)="openThreeActionConfirm()"
>
  Confirm with three actions
</button>

<button
  aria-haspopup="dialog"
  class="sky-btn sky-btn-default sky-margin-inline-sm"
  type="button"
  (click)="openDeleteConfirm()"
>
  Confirm with delete button
</button>

@if (selectedAction) {
  @if (selectedText) {
    <p class="displayed-text">
      You selected the "{{ selectedText }}" button, which has an action of "{{
        selectedAction
      }}."
    </p>
  } @else {
    <p class="displayed-text">
      You selected the "{{ selectedAction }}" action.
    </p>
  }
}
