注目
通知Basic Toast
A transient, auto-dismissing confirmation announced politely.
#toast#snackbar#transient
6 個のフレームワーク中級
Loading…
An unread counter that accrues without ever interrupting.
<!--
The badge is the notification system's ambient channel: it never interrupts,
it just accrues. Three details make it work.
1. The visible "3" is aria-hidden and the button's accessible name carries the
whole sentence - "Notifications, 3 unread". A screen reader announcing
"button, 3" tells you nothing.
2. The polite live region is a SEPARATE hidden span. Putting aria-live on the
button itself makes some screen readers re-announce the entire button
(label, role, state) on every tick.
3. At zero the badge is not rendered - not hidden, not empty. An empty badge
still paints a dot that means nothing.
Anything over 99 collapses to "99+" visually, while the accessible name keeps
the true count.
-->
<button class="bell" type="button" aria-label="Notifications, 3 unread">
<svg class="bell__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M10 2a5 5 0 0 0-5 5v3.6l-1.3 2.6A1 1 0 0 0 4.6 15h10.8a1 1 0 0 0 .9-1.8L15 10.6V7a5 5 0 0 0-5-5Zm0 16a2.5 2.5 0 0 0 2.5-2.5h-5A2.5 2.5 0 0 0 10 18Z" />
</svg>
<span class="bell__badge" aria-hidden="true">3</span>
</button>
<span class="bell__announce" role="status" aria-live="polite">3 unread notifications</span>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
count | number | 0 | バッジに表示される数値。99 を超えると「99+」と表示されます。 |
ariaLabel | string | - | ボタンのアクセシブルな名前。アイコンのみのボタンでは必須です。 |
onClick | () => void | - | ユーザーがコントロールを実行したときに発火します。 |
className | string | - | ルート要素にマージされる追加クラス。 |
The visible number is decoration - aria-hidden - and the button's accessible name carries the sentence, because "button, 3" tells a screen-reader user nothing. Keep the polite announcement in its own hidden span; putting aria-live on the button makes several screen readers re-read the entire button on every tick. Render nothing at zero rather than an empty badge, and if the count updates often, debounce the announcement - the badge's job is to be ignorable.