{"meta":"<h2 id=\"Develop Guide\">Develop Guide <a class=\"header-anchor scroll-count-item\" href=\"#Develop Guide\" data-scroll-id=\"Develop Guide\">#</a></h2>\n<h3 id=\"When To Use\">When to Use <a class=\"header-anchor scroll-count-item\" href=\"#When To Use\" data-scroll-id=\"When To Use\">#</a></h3>\n<p>When we receive a new message, or our app/plugin/module should be update or upgrade.</p>\n<h3 id=\"Accessibility\">Accessibility <a class=\"header-anchor scroll-count-item\" href=\"#Accessibility\" data-scroll-id=\"Accessibility\">#</a></h3>\n<p>You can add class as below, so that messages will not appear on pages, but can be read by screen reader.\n<code>&lt;span className=&quot;next-sr-only&quot;&gt;unread messages&lt;/span&gt;</code></p>\n","api":"<h2 id=\"API\">API <a class=\"header-anchor scroll-count-item\" href=\"#API\" data-scroll-id=\"API\">#</a></h2>\n<h3 id=\"Badge\">Badge <a class=\"header-anchor scroll-count-item\" href=\"#Badge\" data-scroll-id=\"Badge\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>Content of Badge based on</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>count</td>\n<td>Number to display, display overflowCount+ when count is greater than overflowCount, display none when count equal to 0</td>\n<td>number | string</td>\n<td>0</td>\n<td></td>\n</tr>\n<tr>\n<td>content</td>\n<td>Customized node content</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>overflowCount</td>\n<td>Max number to display</td>\n<td>number | string</td>\n<td>99</td>\n<td></td>\n</tr>\n<tr>\n<td>dot</td>\n<td>Display a red dot, not a number</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>showZero</td>\n<td>Whether to show count when count is 0</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n"}