CornerOverlay

Position a small overlay badge on one corner of inline content, such as status dots, verification icons, or action affordances.

Basic Usage

Basic

Demo will load when visible.

<template>
  <TxCornerOverlay placement="bottom-right" :offset-x="-2" :offset-y="-2">
    <TxAvatar src="https://avatars.githubusercontent.com/u/4?v=4" />
    <template #overlay>
      <span style="width:12px;height:12px;border-radius:999px;background:#22c55e;border:2px solid var(--tx-bg-color);" />
    </template>
  </TxCornerOverlay>

  <TxCornerOverlay placement="top-right" :offset-x="-4" :offset-y="-4">
    <TxAvatar src="https://avatars.githubusercontent.com/u/5?v=4" />
    <template #overlay>
      <span style="background:var(--tx-bg-color);border-radius:999px;padding:2px;box-shadow:0 1px 6px rgba(0,0,0,.12);">
        <TxIcon name="i-carbon-checkmark-filled" style="font-size:18px;color:var(--tx-color-primary);" />
      </span>
    </template>
  </TxCornerOverlay>
</template>

API

Props

Prop	Type	Default	Description
placement	`'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`	`bottom-right`	Corner used to anchor the overlay layer.
offsetX	`string \| number`	`0`	Horizontal offset from the selected corner; numeric values are normalized to pixels.
offsetY	`string \| number`	`0`	Vertical offset from the selected corner; numeric values are normalized to pixels.
overlayPointerEvents	`'none' \| 'auto'`	`none`	Pointer-events mode for the overlay layer.