data-theme = lofi
Indicator
daisyUI 5 indicator 类的包装器，在另一个元素的角落重叠徽章或圆点。position（上/中/下 × 左/中/右，共 9 种）、dot（bool，true=纯圆点无文字）、color（8 色，默认=错误）、appearance（实心默认 / 柔和 / 轮廓 / 幽灵 / 虚线）4 个 prop。默认实心（浓填充）强调"有通知"。柔和等为可选。$badge slot 放内容，$slot 放被覆盖的元素。
default
position=top-end, dot=false, color=error, appearance=solid — bell button に未読数 "3" を重ねる
9 positions grid — top / middle / bottom × start / center / end
top-end が daisyUI default。class 名は indicator-top indicator-end 等の組み合わせ。
dot vs badge — テキスト無しの純ドット (dot=true) vs バッジテキスト (dot=false, default)
dot=true — 「何かある」だけを示すミニドット
dot=false (default) — 件数を表示
color variants — 全色 (default=error 先頭)
appearance variants — solid (default) / soft / outline / ghost / dash
default は solid で「通知あり」を強く伝える。穏やかに見せたいときは appearance="soft" を opt-in。
real-world examples — Avatar + new message dot / Cart + count / Inbox + unread
Card + "NEW" tag (top-start)
使い方
{{-- 最小 — top-end に "3" のバッジ (default color=error) --}}
<x-indicator>
<x-slot:badge>3</x-slot:badge>
<button class="btn btn-circle">...</button>
</x-indicator>
{{-- dot=true — テキスト無しの純ドット ("何かある" だけ伝える) --}}
<x-indicator :dot="true" color="success" position="bottom-end">
<div class="avatar">...</div>
</x-indicator>
{{-- position: top-start / top-center / top-end (default)
middle-start / middle-center / middle-end
bottom-start / bottom-center / bottom-end --}}
<x-indicator position="bottom-end">
<x-slot:badge>5</x-slot:badge>
<button class="btn btn-square">...</button>
</x-indicator>
{{-- color: error (default) / primary / secondary / accent / info / success / warning --}}
<x-indicator color="primary">
<x-slot:badge>NEW</x-slot:badge>
<div>...</div>
</x-indicator>
{{-- appearance: solid (default) / soft / outline / ghost / dash --}}
<x-indicator appearance="soft" color="error">
<x-slot:badge>3</x-slot:badge>
<button class="btn btn-circle">...</button>
</x-indicator>
data-theme = night
Indicator
daisyUI 5 indicator 类的包装器，在另一个元素的角落重叠徽章或圆点。position（上/中/下 × 左/中/右，共 9 种）、dot（bool，true=纯圆点无文字）、color（8 色，默认=错误）、appearance（实心默认 / 柔和 / 轮廓 / 幽灵 / 虚线）4 个 prop。默认实心（浓填充）强调"有通知"。柔和等为可选。$badge slot 放内容，$slot 放被覆盖的元素。
default
position=top-end, dot=false, color=error, appearance=solid — bell button に未読数 "3" を重ねる
9 positions grid — top / middle / bottom × start / center / end
top-end が daisyUI default。class 名は indicator-top indicator-end 等の組み合わせ。
dot vs badge — テキスト無しの純ドット (dot=true) vs バッジテキスト (dot=false, default)
dot=true — 「何かある」だけを示すミニドット
dot=false (default) — 件数を表示
color variants — 全色 (default=error 先頭)
appearance variants — solid (default) / soft / outline / ghost / dash
default は solid で「通知あり」を強く伝える。穏やかに見せたいときは appearance="soft" を opt-in。
real-world examples — Avatar + new message dot / Cart + count / Inbox + unread
Card + "NEW" tag (top-start)
使い方
{{-- 最小 — top-end に "3" のバッジ (default color=error) --}}
<x-indicator>
<x-slot:badge>3</x-slot:badge>
<button class="btn btn-circle">...</button>
</x-indicator>
{{-- dot=true — テキスト無しの純ドット ("何かある" だけ伝える) --}}
<x-indicator :dot="true" color="success" position="bottom-end">
<div class="avatar">...</div>
</x-indicator>
{{-- position: top-start / top-center / top-end (default)
middle-start / middle-center / middle-end
bottom-start / bottom-center / bottom-end --}}
<x-indicator position="bottom-end">
<x-slot:badge>5</x-slot:badge>
<button class="btn btn-square">...</button>
</x-indicator>
{{-- color: error (default) / primary / secondary / accent / info / success / warning --}}
<x-indicator color="primary">
<x-slot:badge>NEW</x-slot:badge>
<div>...</div>
</x-indicator>
{{-- appearance: solid (default) / soft / outline / ghost / dash --}}
<x-indicator appearance="soft" color="error">
<x-slot:badge>3</x-slot:badge>
<button class="btn btn-circle">...</button>
</x-indicator>