data-theme = lofi
Indicator
daisyUI 5 の indicator class を wrap した、別要素の角にバッジやドットを重ねるためのレイアウト。position (top/middle/bottom × start/center/end の 9 通り)・dot (bool, true = テキスト無しの純ドット)・color (8 色、default=error)・appearance (solid default / soft / outline / ghost / dash) の 4 props。default は solid (濃い fill) で「通知あり」を強く伝える。soft 等は opt-in。中身は $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 class を wrap した、別要素の角にバッジやドットを重ねるためのレイアウト。position (top/middle/bottom × start/center/end の 9 通り)・dot (bool, true = テキスト無しの純ドット)・color (8 色、default=error)・appearance (solid default / soft / outline / ghost / dash) の 4 props。default は solid (濃い fill) で「通知あり」を強く伝える。soft 等は opt-in。中身は $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>