组件
pinion-ui

Theme

Tune

Lang

Indicator

daisyUI 5 indicator 类的包装器，在另一个元素的角落重叠徽章或圆点。position（上/中/下 × 左/中/右，共 9 种）、dot（bool，true=纯圆点无文字）、color（8 色，默认=错误）、appearance（实心默认 / 柔和 / 轮廓 / 幽灵 / 虚线）4 个 prop。默认实心（浓填充）强调"有通知"。柔和等为可选。$badge slot 放内容，$slot 放被覆盖的元素。

最简 — 在 top-end 显示「3」的徽章 (default color=error)

3 
<x-indicator>
    <x-slot:badge>3</x-slot:badge>
    <button class="inline-flex items-center justify-center w-10 h-10 rounded-full border-[length:var(--border)] border-base-content/10 bg-base-200 hover:bg-base-300 transition-colors cursor-pointer" aria-label="notifications">
        <x-i type="bell" variant="linear" class="w-5 h-5" />
    </button>
</x-indicator>

<div class="relative inline-flex w-fit">
<span class="absolute z-10 top-0 end-0 -translate-y-1/2 translate-x-1/2 inline-flex items-center justify-center whitespace-nowrap text-xs leading-none font-medium h-5 w-5 p-0 rounded-full tune-border bg-error text-error-content border-error">3</span>
<button class="inline-flex items-center justify-center w-10 h-10 rounded-full border-[length:var(--border)] border-base-content/10 bg-base-200 hover:bg-base-300 transition-colors cursor-pointer" aria-label="notifications"><svg class="w-5 h-5" viewbox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M18.75 9.71v-.705C18.75 5.136 15.726 2 12 2S5.25 5.136 5.25 9.005v.705a4.4 4.4 0 0 1-.692 2.375L3.45 13.81c-1.011 1.575-.239 3.716 1.52 4.214a25.8 25.8 0 0 0 14.06 0c1.759-.498 2.531-2.639 1.52-4.213l-1.108-1.725a4.4 4.4 0 0 1-.693-2.375Z"></path>
<path stroke-linecap="round" d="M7.5 19c.655 1.748 2.422 3 4.5 3s3.845-1.252 4.5-3"></path>
</g></svg></button>
</div>

position — top / middle / bottom x start / center / end

!
top-start
!
top-center
!
top-end
!
middle-start
!
middle-center
!
middle-end
!
bottom-start
!
bottom-center
!
bottom-end
<x-indicator position="top-start"><x-slot:badge>!</x-slot:badge><div class="w-24 h-16 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">top-start</div></x-indicator>
<x-indicator position="top-center"><x-slot:badge>!</x-slot:badge><div class="w-24 h-16 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">top-center</div></x-indicator>
<x-indicator position="top-end"><x-slot:badge>!</x-slot:badge><div class="w-24 h-16 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">top-end</div></x-indicator>
<x-indicator position="middle-start"><x-slot:badge>!</x-slot:badge><div class="w-24 h-16 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">middle-start</div></x-indicator>
<x-indicator position="middle-center"><x-slot:badge>!</x-slot:badge><div class="w-24 h-16 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">middle-center</div></x-indicator>
<x-indicator position="middle-end"><x-slot:badge>!</x-slot:badge><div class="w-24 h-16 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">middle-end</div></x-indicator>
<x-indicator position="bottom-start"><x-slot:badge>!</x-slot:badge><div class="w-24 h-16 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">bottom-start</div></x-indicator>
<x-indicator position="bottom-center"><x-slot:badge>!</x-slot:badge><div class="w-24 h-16 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">bottom-center</div></x-indicator>
<x-indicator position="bottom-end"><x-slot:badge>!</x-slot:badge><div class="w-24 h-16 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">bottom-end</div></x-indicator>

<div class="relative inline-flex w-fit">
<span class="absolute z-10 top-0 start-0 -translate-y-1/2 -translate-x-1/2 inline-flex items-center justify-center whitespace-nowrap text-xs leading-none font-medium h-5 w-5 p-0 rounded-full tune-border bg-error text-error-content border-error">!</span>
<div class="w-24 h-16 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">
        top-start
    </div>
</div>
<div class="relative inline-flex w-fit">
<span class="absolute z-10 top-0 start-1/2 -translate-y-1/2 -translate-x-1/2 inline-flex items-center justify-center whitespace-nowrap text-xs leading-none font-medium h-5 w-5 p-0 rounded-full tune-border bg-error text-error-content border-error">!</span>
<div class="w-24 h-16 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">
        top-center
    </div>
</div>
<div class="relative inline-flex w-fit">
<span class="absolute z-10 top-0 end-0 -translate-y-1/2 translate-x-1/2 inline-flex items-center justify-center whitespace-nowrap text-xs leading-none font-medium h-5 w-5 p-0 rounded-full tune-border bg-error text-error-content border-error">!</span>
<div class="w-24 h-16 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">
        top-end
    </div>
</div>
<div class="relative inline-flex w-fit">
<span class="absolute z-10 top-1/2 start-0 -translate-y-1/2 -translate-x-1/2 inline-flex items-center justify-center whitespace-nowrap text-xs leading-none font-medium h-5 w-5 p-0 rounded-full tune-border bg-error text-error-content border-error">!</span>
<div class="w-24 h-16 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">
        middle-start
    </div>
</div>
<div class="relative inline-flex w-fit">
<span class="absolute z-10 top-1/2 start-1/2 -translate-y-1/2 -translate-x-1/2 inline-flex items-center justify-center whitespace-nowrap text-xs leading-none font-medium h-5 w-5 p-0 rounded-full tune-border bg-error text-error-content border-error">!</span>
<div class="w-24 h-16 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">
        middle-center
    </div>
</div>
<div class="relative inline-flex w-fit">
<span class="absolute z-10 top-1/2 end-0 -translate-y-1/2 translate-x-1/2 inline-flex items-center justify-center whitespace-nowrap text-xs leading-none font-medium h-5 w-5 p-0 rounded-full tune-border bg-error text-error-content border-error">!</span>
<div class="w-24 h-16 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">
        middle-end
    </div>
</div>
<div class="relative inline-flex w-fit">
<span class="absolute z-10 bottom-0 start-0 translate-y-1/2 -translate-x-1/2 inline-flex items-center justify-center whitespace-nowrap text-xs leading-none font-medium h-5 w-5 p-0 rounded-full tune-border bg-error text-error-content border-error">!</span>
<div class="w-24 h-16 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">
        bottom-start
    </div>
</div>
<div class="relative inline-flex w-fit">
<span class="absolute z-10 bottom-0 start-1/2 translate-y-1/2 -translate-x-1/2 inline-flex items-center justify-center whitespace-nowrap text-xs leading-none font-medium h-5 w-5 p-0 rounded-full tune-border bg-error text-error-content border-error">!</span>
<div class="w-24 h-16 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">
        bottom-center
    </div>
</div>
<div class="relative inline-flex w-fit">
<span class="absolute z-10 bottom-0 end-0 translate-y-1/2 translate-x-1/2 inline-flex items-center justify-center whitespace-nowrap text-xs leading-none font-medium h-5 w-5 p-0 rounded-full tune-border bg-error text-error-content border-error">!</span>
<div class="w-24 h-16 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">
        bottom-end
    </div>
</div>

dot vs badge — 无文字的纯圆点 (dot=true) vs 徽章文字 (dot=false, default)

12 
<x-indicator :dot="true">
    <button class="inline-flex items-center justify-center w-10 h-10 rounded-full border-[length:var(--border)] border-base-content/10 bg-base-200 hover:bg-base-300 transition-colors cursor-pointer" aria-label="notifications">
        <x-i type="bell" variant="linear" class="w-5 h-5" />
    </button>
</x-indicator>
<x-indicator>
    <x-slot:badge>12</x-slot:badge>
    <button class="inline-flex items-center justify-center w-10 h-10 rounded-full border-[length:var(--border)] border-base-content/10 bg-base-200 hover:bg-base-300 transition-colors cursor-pointer" aria-label="notifications">
        <x-i type="bell" variant="linear" class="w-5 h-5" />
    </button>
</x-indicator>

<div class="relative inline-flex w-fit">
<span class="absolute z-10 top-0 end-0 -translate-y-1/2 translate-x-1/2 block h-3 w-3 p-0 rounded-full tune-border bg-error text-error-content border-error"></span>
<button class="inline-flex items-center justify-center w-10 h-10 rounded-full border-[length:var(--border)] border-base-content/10 bg-base-200 hover:bg-base-300 transition-colors cursor-pointer" aria-label="notifications"><svg class="w-5 h-5" viewbox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M18.75 9.71v-.705C18.75 5.136 15.726 2 12 2S5.25 5.136 5.25 9.005v.705a4.4 4.4 0 0 1-.692 2.375L3.45 13.81c-1.011 1.575-.239 3.716 1.52 4.214a25.8 25.8 0 0 0 14.06 0c1.759-.498 2.531-2.639 1.52-4.213l-1.108-1.725a4.4 4.4 0 0 1-.693-2.375Z"></path>
<path stroke-linecap="round" d="M7.5 19c.655 1.748 2.422 3 4.5 3s3.845-1.252 4.5-3"></path>
</g></svg></button>
</div>
<div class="relative inline-flex w-fit">
<span class="absolute z-10 top-0 end-0 -translate-y-1/2 translate-x-1/2 inline-flex items-center justify-center whitespace-nowrap text-xs leading-none font-medium h-5 min-w-[1.25rem] px-1.5 rounded-full tune-border bg-error text-error-content border-error">12</span>
<button class="inline-flex items-center justify-center w-10 h-10 rounded-full border-[length:var(--border)] border-base-content/10 bg-base-200 hover:bg-base-300 transition-colors cursor-pointer" aria-label="notifications"><svg class="w-5 h-5" viewbox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M18.75 9.71v-.705C18.75 5.136 15.726 2 12 2S5.25 5.136 5.25 9.005v.705a4.4 4.4 0 0 1-.692 2.375L3.45 13.81c-1.011 1.575-.239 3.716 1.52 4.214a25.8 25.8 0 0 0 14.06 0c1.759-.498 2.531-2.639 1.52-4.213l-1.108-1.725a4.4 4.4 0 0 1-.693-2.375Z"></path>
<path stroke-linecap="round" d="M7.5 19c.655 1.748 2.422 3 4.5 3s3.845-1.252 4.5-3"></path>
</g></svg></button>
</div>

color variants — 全部颜色 (default=error 排在最前)

1
error
2
primary
3
secondary
4
accent
5
info
6
success
7
warning
<x-indicator color="error"><x-slot:badge>1</x-slot:badge><div class="w-20 h-14 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">error</div></x-indicator>
<x-indicator color="primary"><x-slot:badge>2</x-slot:badge><div class="w-20 h-14 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">primary</div></x-indicator>
<x-indicator color="secondary"><x-slot:badge>3</x-slot:badge><div class="w-20 h-14 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">secondary</div></x-indicator>
<x-indicator color="accent"><x-slot:badge>4</x-slot:badge><div class="w-20 h-14 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">accent</div></x-indicator>
<x-indicator color="info"><x-slot:badge>5</x-slot:badge><div class="w-20 h-14 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">info</div></x-indicator>
<x-indicator color="success"><x-slot:badge>6</x-slot:badge><div class="w-20 h-14 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">success</div></x-indicator>
<x-indicator color="warning"><x-slot:badge>7</x-slot:badge><div class="w-20 h-14 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">warning</div></x-indicator>

<div class="relative inline-flex w-fit">
<span class="absolute z-10 top-0 end-0 -translate-y-1/2 translate-x-1/2 inline-flex items-center justify-center whitespace-nowrap text-xs leading-none font-medium h-5 w-5 p-0 rounded-full tune-border bg-error text-error-content border-error">1</span>
<div class="w-20 h-14 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">
        error
    </div>
</div>
<div class="relative inline-flex w-fit">
<span class="absolute z-10 top-0 end-0 -translate-y-1/2 translate-x-1/2 inline-flex items-center justify-center whitespace-nowrap text-xs leading-none font-medium h-5 w-5 p-0 rounded-full tune-border bg-primary text-primary-content border-primary">2</span>
<div class="w-20 h-14 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">
        primary
    </div>
</div>
<div class="relative inline-flex w-fit">
<span class="absolute z-10 top-0 end-0 -translate-y-1/2 translate-x-1/2 inline-flex items-center justify-center whitespace-nowrap text-xs leading-none font-medium h-5 w-5 p-0 rounded-full tune-border bg-secondary text-secondary-content border-secondary">3</span>
<div class="w-20 h-14 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">
        secondary
    </div>
</div>
<div class="relative inline-flex w-fit">
<span class="absolute z-10 top-0 end-0 -translate-y-1/2 translate-x-1/2 inline-flex items-center justify-center whitespace-nowrap text-xs leading-none font-medium h-5 w-5 p-0 rounded-full tune-border bg-accent text-accent-content border-accent">4</span>
<div class="w-20 h-14 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">
        accent
    </div>
</div>
<div class="relative inline-flex w-fit">
<span class="absolute z-10 top-0 end-0 -translate-y-1/2 translate-x-1/2 inline-flex items-center justify-center whitespace-nowrap text-xs leading-none font-medium h-5 w-5 p-0 rounded-full tune-border bg-info text-info-content border-info">5</span>
<div class="w-20 h-14 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">
        info
    </div>
</div>
<div class="relative inline-flex w-fit">
<span class="absolute z-10 top-0 end-0 -translate-y-1/2 translate-x-1/2 inline-flex items-center justify-center whitespace-nowrap text-xs leading-none font-medium h-5 w-5 p-0 rounded-full tune-border bg-success text-success-content border-success">6</span>
<div class="w-20 h-14 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">
        success
    </div>
</div>
<div class="relative inline-flex w-fit">
<span class="absolute z-10 top-0 end-0 -translate-y-1/2 translate-x-1/2 inline-flex items-center justify-center whitespace-nowrap text-xs leading-none font-medium h-5 w-5 p-0 rounded-full tune-border bg-warning text-warning-content border-warning">7</span>
<div class="w-20 h-14 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">
        warning
    </div>
</div>

appearance — solid (default) / soft / outline / ghost / dash

3
solid
3
soft
3
outline
3
ghost
3
dash
<x-indicator appearance="solid" color="error"><x-slot:badge>3</x-slot:badge><div class="w-20 h-14 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">solid</div></x-indicator>
<x-indicator appearance="soft" color="error"><x-slot:badge>3</x-slot:badge><div class="w-20 h-14 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">soft</div></x-indicator>
<x-indicator appearance="outline" color="error"><x-slot:badge>3</x-slot:badge><div class="w-20 h-14 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">outline</div></x-indicator>
<x-indicator appearance="ghost" color="error"><x-slot:badge>3</x-slot:badge><div class="w-20 h-14 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">ghost</div></x-indicator>
<x-indicator appearance="dash" color="error"><x-slot:badge>3</x-slot:badge><div class="w-20 h-14 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">dash</div></x-indicator>

<div class="relative inline-flex w-fit">
<span class="absolute z-10 top-0 end-0 -translate-y-1/2 translate-x-1/2 inline-flex items-center justify-center whitespace-nowrap text-xs leading-none font-medium h-5 w-5 p-0 rounded-full tune-border bg-error text-error-content border-error">3</span>
<div class="w-20 h-14 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">
        solid
    </div>
</div>
<div class="relative inline-flex w-fit">
<span class="absolute z-10 top-0 end-0 -translate-y-1/2 translate-x-1/2 inline-flex items-center justify-center whitespace-nowrap text-xs leading-none font-medium h-5 w-5 p-0 rounded-full tune-border bg-error/15 text-error border-transparent">3</span>
<div class="w-20 h-14 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">
        soft
    </div>
</div>
<div class="relative inline-flex w-fit">
<span class="absolute z-10 top-0 end-0 -translate-y-1/2 translate-x-1/2 inline-flex items-center justify-center whitespace-nowrap text-xs leading-none font-medium h-5 w-5 p-0 rounded-full tune-border bg-base-100 text-error border-error">3</span>
<div class="w-20 h-14 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">
        outline
    </div>
</div>
<div class="relative inline-flex w-fit">
<span class="absolute z-10 top-0 end-0 -translate-y-1/2 translate-x-1/2 inline-flex items-center justify-center whitespace-nowrap text-xs leading-none font-medium h-5 w-5 p-0 rounded-full tune-border bg-base-200 text-base-content border-transparent">3</span>
<div class="w-20 h-14 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">
        ghost
    </div>
</div>
<div class="relative inline-flex w-fit">
<span class="absolute z-10 top-0 end-0 -translate-y-1/2 translate-x-1/2 inline-flex items-center justify-center whitespace-nowrap text-xs leading-none font-medium h-5 w-5 p-0 rounded-full tune-border bg-base-100 text-error border-error border-dashed">3</span>
<div class="w-20 h-14 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-xs text-base-content/60">
        dash
    </div>
</div>

real-world — avatar dot / cart count / inbox unread / NEW tag

5
99+
NEW
product card 
<x-indicator :dot="true" color="success" position="bottom-end">
    <div class="w-14 h-14 rounded-full bg-base-300 flex items-center justify-center">
        <x-i type="user" variant="bold" class="w-8 h-8 text-base-content/40" />
    </div>
</x-indicator>
<x-indicator color="primary">
    <x-slot:badge>5</x-slot:badge>
    <button class="inline-flex items-center justify-center w-10 h-10 rounded-[var(--radius-field)] border-[length:var(--border)] border-base-content/10 bg-base-200 hover:bg-base-300 transition-colors cursor-pointer" aria-label="cart">
        <x-i type="cart-large" variant="linear" class="w-6 h-6" />
    </button>
</x-indicator>
<x-indicator>
    <x-slot:badge>99+</x-slot:badge>
    <button class="inline-flex items-center justify-center gap-2 h-10 px-4 rounded-[var(--radius-field)] border-[length:var(--border)] border-base-content/10 bg-base-200 text-sm font-medium hover:bg-base-300 transition-colors cursor-pointer" aria-label="inbox">
        <x-i type="inbox" variant="linear" class="w-5 h-5" />
        Inbox
    </button>
</x-indicator>
<x-indicator color="warning" position="top-start">
    <x-slot:badge>NEW</x-slot:badge>
    <div class="w-40 h-24 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-sm text-base-content/60">
        product card
    </div>
</x-indicator>

<div class="relative inline-flex w-fit">
<span class="absolute z-10 bottom-0 end-0 translate-y-1/2 translate-x-1/2 block h-3 w-3 p-0 rounded-full tune-border bg-success text-success-content border-success"></span>
<div class="w-14 h-14 rounded-full bg-base-300 flex items-center justify-center">
<svg class="w-8 h-8 text-base-content/40" viewbox="0 0 24 24">
<circle cx="12" cy="6" r="4" fill="currentColor"></circle>
<path fill="currentColor" d="M20 17.5c0 2.485 0 4.5-8 4.5s-8-2.015-8-4.5S7.582 13 12 13s8 2.015 8 4.5"></path></svg>
</div>
</div>
<div class="relative inline-flex w-fit">
<span class="absolute z-10 top-0 end-0 -translate-y-1/2 translate-x-1/2 inline-flex items-center justify-center whitespace-nowrap text-xs leading-none font-medium h-5 w-5 p-0 rounded-full tune-border bg-primary text-primary-content border-primary">5</span>
<button class="inline-flex items-center justify-center w-10 h-10 rounded-[var(--radius-field)] border-[length:var(--border)] border-base-content/10 bg-base-200 hover:bg-base-300 transition-colors cursor-pointer" aria-label="cart"><svg class="w-6 h-6" viewbox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" d="m2 3l.265.088c1.32.44 1.98.66 2.357 1.184S5 5.492 5 6.883V9.5c0 2.828 0 4.243.879 5.121c.878.879 2.293.879 5.121.879h8"></path>
<path d="M7.5 18a1.5 1.5 0 1 1 0 3a1.5 1.5 0 0 1 0-3Zm9 0a1.5 1.5 0 1 1 0 3a1.5 1.5 0 0 1 0-3Z"></path>
<path stroke-linecap="round" d="M11 9H8"></path>
<path d="M5 6h11.45c2.055 0 3.083 0 3.528.674c.444.675.04 1.619-.77 3.508l-.429 1c-.378.882-.567 1.322-.942 1.57c-.376.248-.856.248-1.815.248H5"></path>
</g></svg></button>
</div>
<div class="relative inline-flex w-fit">
<span class="absolute z-10 top-0 end-0 -translate-y-1/2 translate-x-1/2 inline-flex items-center justify-center whitespace-nowrap text-xs leading-none font-medium h-5 min-w-[1.25rem] px-1.5 rounded-full tune-border bg-error text-error-content border-error">99+</span>
<button class="inline-flex items-center justify-center gap-2 h-10 px-4 rounded-[var(--radius-field)] border-[length:var(--border)] border-base-content/10 bg-base-200 text-sm font-medium hover:bg-base-300 transition-colors cursor-pointer" aria-label="inbox"><svg class="w-5 h-5" viewbox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12Z"></path>
<path stroke-linecap="round" d="M2 13h3.16c.905 0 1.358 0 1.756.183s.692.527 1.281 1.214l.606.706c.589.687.883 1.031 1.281 1.214s.85.183 1.756.183h.32c.905 0 1.358 0 1.756-.183s.692-.527 1.281-1.214l.606-.706c.589-.687.883-1.031 1.281-1.214S17.934 13 18.84 13H22"></path>
</g></svg> Inbox</button>
</div>
<div class="relative inline-flex w-fit">
<span class="absolute z-10 top-0 start-0 -translate-y-1/2 -translate-x-1/2 inline-flex items-center justify-center whitespace-nowrap text-xs leading-none font-medium h-5 min-w-[1.25rem] px-1.5 rounded-full tune-border bg-warning text-warning-content border-warning">NEW</span>
<div class="w-40 h-24 bg-base-200 border border-base-300 rounded-[var(--radius-box)] flex items-center justify-center text-sm text-base-content/60">
        product card
    </div>
</div>