data-theme = lofi
Indicator
Wrap daisyUI 5 indicator class to overlay a badge or dot at a corner. position (9 combos: top/middle/bottom × start/center/end), dot (bool; true = plain dot, no text), color (8 colors, default=error), appearance (solid default / soft / outline / ghost / dash). Default is solid (dark fill) for strong "has notification" signal; soft is opt-in. Slot $badge for the badge, $slot for the element beneath.
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
Wrap daisyUI 5 indicator class to overlay a badge or dot at a corner. position (9 combos: top/middle/bottom × start/center/end), dot (bool; true = plain dot, no text), color (8 colors, default=error), appearance (solid default / soft / outline / ghost / dash). Default is solid (dark fill) for strong "has notification" signal; soft is opt-in. Slot $badge for the badge, $slot for the element beneath.
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>