data-theme = lofi
Indicator
daisyUI 5 的 indicator 類別包裝，在別層元素角落疊徽章或點。position (top/middle/bottom × start/center/end 共 9 種)、dot (布林，true=純點無文字)、color (8 色，預設=error)、appearance (solid 預設 / soft / outline / ghost / dash) 4 個屬性。預設 solid (濃填充) 強調「有通知」。soft 等為選加。內容放入 $badge 槽位，被覆蓋元素放入 $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 (top/middle/bottom × start/center/end 共 9 種)、dot (布林，true=純點無文字)、color (8 色，預設=error)、appearance (solid 預設 / soft / outline / ghost / dash) 4 個屬性。預設 solid (濃填充) 強調「有通知」。soft 等為選加。內容放入 $badge 槽位，被覆蓋元素放入 $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>