फ़ीचर्ड
नोटिफ़िकेशन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.