Popconfirm

Request a brief confirmation near the action element.

<sy-popconfirm>Installation guide Basic usage

Live preview

Interact with the component to see results here.

PositionConfirm textCancel textAnimation

ArrowClose button

View code

HTML

<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>Archive item<sy-popconfirm
      position="bottom"
      confirmtext="Archive"
      canceltext="Cancel"
      arrow
      animation="none"
      id="sample"
    ><span>Archive this example item?</span></sy-popconfirm>
  </sy-button>
</div>

Usage guide

Use for actions requiring a brief confirmation, such as deletion or reset. Use Modal for longer explanations or input.

Place inside the action button
Put the question in the default slot and make outcomes clear with confirmText and cancelText.
Distinguish confirmation results
Check for ok or cancel in selected.detail.
Act only after confirmation
Perform the actual action only after receiving ok. Do not run it on the button's initial click.

Examples

Confirm an action

Choose Archive or Cancel and inspect the result.

View code

HTML

<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>Archive item<sy-popconfirm
      position="bottom"
      confirmtext="Archive"
      canceltext="Cancel"
      arrow
      id="sample"
    ><span>Archive this example item?</span></sy-popconfirm>
  </sy-button>
</div>

Display direction

Place the confirmation above the action element.

View code

HTML

<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>Archive item<sy-popconfirm
      position="top"
      confirmtext="Archive"
      canceltext="Cancel"
      arrow
      id="sample"
    ><span>Archive this example item?</span></sy-popconfirm>
  </sy-button>
</div>

Allow dismissal

Provide a close button in addition to Confirm and Cancel.

View code

HTML

<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>Archive item<sy-popconfirm
      position="bottom"
      confirmtext="Archive"
      canceltext="Cancel"
      arrow
      closable
      id="sample"
    ><span>Archive this example item?</span></sy-popconfirm>
  </sy-button>
</div>

Direct control

Disable automatic triggers and control it through methods.

View code

HTML

<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>Archive item<sy-popconfirm
      position="bottom"
      confirmtext="Archive"
      canceltext="Cancel"
      arrow
      trigger="none"
      id="sample"
    ><span>Archive this example item?</span></sy-popconfirm>
  </sy-button>
</div>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">Open confirmation</sy-button>
  <sy-button id="action-1" size="small">Close</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.setOpen();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.setClose();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

Events and payloads

Interact with the component and inspect the latest event name and detail. The code includes subscriptions to events emitted by this component and its children.

View code

HTML

<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>Archive item<sy-popconfirm
      position="bottom"
      confirmtext="Archive"
      canceltext="Cancel"
      arrow
      animation="none"
      id="sample"
    ><span>Archive this example item?</span></sy-popconfirm>
  </sy-button>
</div>
<output id="demo-events" aria-live="polite">Interact with the component to see
  its latest event and payload.</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  for (const name of ["visibleChanged", "selected"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

Confirmation without an arrow

Keep the confirmation actions while removing the pointer arrow.

View code

HTML

<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>Archive item<sy-popconfirm
      position="bottom"
      confirmtext="Archive"
      canceltext="Cancel"
      animation="none"
      id="sample"
    ><span>Archive this example item?</span></sy-popconfirm>
  </sy-button>
</div>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "arrow": false
  });
</script>

Feature examples

Choose a feature from 16 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Find a feature

Usage examples · Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code

HTML

Loading the example.