1"use strict";(self.webpackChunk_patternfly_react_docs=self.webpackChunk_patternfly_react_docs||[]).push([[3130],{66019:function(e,n,a){a.r(n),a.d(n,{default:function(){return s}});var t=a(2784),i=a(52898),o=a(94432);function d(){return d=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var a=arguments[n];for(var t in a)Object.prototype.hasOwnProperty.call(a,t)&&(e[t]=a[t])}return e},d.apply(this,arguments)}var c={id:"Notification badge",section:"components",subsection:"",deprecated:!1,beta:!1,demo:!1,newImplementationLink:!1,source:"react",tabName:null,slug:"/components/notification-badge/react",sourceLink:"https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/NotificationBadge/examples/NotificationBadge.md",relPath:"packages/react-core/src/components/NotificationBadge/examples/NotificationBadge.md",propComponents:[{name:"NotificationBadge",description:"",props:[{name:"aria-label",type:"string",description:"Adds an accessible label to the notification badge."},{name:"attentionIcon",type:"React.ReactNode",description:"Icon to display for attention variant.",defaultValue:"<AttentionBellIcon />"},{name:"children",type:"React.ReactNode",description:"Content rendered inside the notification badge."},{name:"className",type:"string",description:"Additional classes added to the notification badge."},{name:"count",type:"number",description:"A number displayed in the badge alongside the icon.",defaultValue:"0"},{name:"icon",type:"React.ReactNode",description:"Icon to display in the notification badge.",defaultValue:"<BellIcon />"},{name:"isExpanded",type:"boolean",description:"Flag for applying expanded styling and setting the aria-expanded attribute on the\nnotification badge.",defaultValue:"false"},{name:"variant",type:"NotificationBadgeVariant | 'read' | 'unread' | 'attention'",description:"Determines the variant of the notification badge.",defaultValue:"NotificationBadgeVariant.read"}]}],cssPrefix:["pf-v5-c-notification-badge"],examples:["Basic","With count"]};c.liveContext={BellIcon:o.ZP},c.relativeImports="import 'react-core/src/components/NotificationBadge/examples/./notificationBadge.css';",c.examples={Basic:function(e){return t.createElement(i.en,d({},c,e,{code:'import React from \'react\';\nimport { NotificationBadge, NotificationBadgeVariant } from \'@patternfly/react-core\';\n\nexport const NotificationBadgeBasic: React.FunctionComponent = () => {\n const [readExpanded, setReadExpanded] = React.useState(false);\n const [unreadExpanded, setUnreadExpanded] = React.useState(false);\n const [attentionExpanded, setAttentionExpanded] = React.useState(false);\n\n const onReadClick = () => {\n setReadExpanded(!readExpanded);\n };\n\n const onUnreadClick = () => {\n setUnreadExpanded(!unreadExpanded);\n };\n\n const onAttentionClick = () => {\n setAttentionExpanded(!attentionExpanded);\n };\n\n return (\n <div className="pf-t-dark">\n <NotificationBadge\n variant={NotificationBadgeVariant.read}\n onClick={onReadClick}\n aria-label="Basic notification badge with read variant"\n isExpanded={readExpanded}\n />\n <NotificationBadge\n variant={NotificationBadgeVariant.unread}\n onClick={onUnreadClick}\n aria-label="Basic notification badge with unread variant"\n isExpanded={unreadExpanded}\n />\n <NotificationBadge\n variant={NotificationBadgeVariant.attention}\n onClick={onAttentionClick}\n aria-label="Basic notification badge with attention variant"\n isExpanded={attentionExpanded}\n />\n </div>\n );\n};\n',title:"Basic",lang:"ts"}),t.createElement("p",{className:"ws-p"},'The following example demonstrates the three variants of notification badge that are available: "read", "unread", and "attention".'),t.createElement("p",{className:"ws-p"},"The ",t.createElement("code",{className:"ws-code"},"isExpanded")," property is also passed in to:"),t.createElement("ul",{className:"ws-ul"},t.createElement("li",{className:"ws-li"},"set the ",t.createElement("code",{className:"ws-code"},"aria-expanded")," attribute on the notification badge,"),t.createElement("li",{className:"ws-li"},"apply visual styling on the notification badge, and"),t.createElement("li",{className:"ws-li"},"to indiciate that a notification drawer is expanded, for use-cases as seen in our ",t.createElement(i.rU,{to:"/components/notification-drawer/react-demos"},"notification drawer react demos"),".")))},"With count":function(e){return t.createElement(i.en,d({},c,e,{code:'import React from \'react\';\nimport { NotificationBadge, NotificationBadgeVariant } from \'@patternfly/react-core\';
1\n\nexport const NotificationBadgeWithCount: React.FunctionComponent = () => {\n const [readExpanded, setReadExpanded] = React.useState(false);\n const [unreadExpanded, setUnreadExpanded] = React.useState(false);\n const [attentionExpanded, setAttentionExpanded] = React.useState(false);\n\n const onReadClick = () => {\n setReadExpanded(!readExpanded);\n };\n\n const onUnreadClick = () => {\n setUnreadExpanded(!unreadExpanded);\n };\n\n const onAttentionClick = () => {\n setAttentionExpanded(!attentionExpanded);\n };\n\n return (\n <div className="pf-t-dark">\n <NotificationBadge\n variant={NotificationBadgeVariant.read}\n onClick={onReadClick}\n aria-label="Notification badge with count and read variant"\n isExpanded={readExpanded}\n count={10}\n />\n <NotificationBadge\n variant={NotificationBadgeVariant.unread}\n onClick={onUnreadClick}\n aria-label="Notification badge with count and unread variant"\n isExpanded={unreadExpanded}\n count={10}\n />\n <NotificationBadge\n variant={NotificationBadgeVariant.attention}\n onClick={onAttentionClick}\n aria-label="Notification badge with count and attention variant"\n isExpanded={attentionExpanded}\n count={10}\n />\n </div>\n );\n};\n',title:"With count",lang:"ts"}),t.createElement("p",{className:"ws-p"}
1,"You can display a number within the notification badge by passing in the ",t.createElement("code",{className:"ws-code"},"count")," property, to indicate how many read, unread, or attention notifications there are. The ",t.createElement("code",{className:"ws-code"},"isExpanded")," property is also passed in, similar to the ",t.createElement(i.rU,{to:"/components/notification-badge#basic"},"notification badge basic example"),"."))}};var r=function(){return t.createElement(t.Fragment,null,t.createElement(i.sg,{id:"examples",size:"h2",className:"ws-title ws-h2"},"Examples"),t.createElement(c.examples.Basic),t.createElement(c.examples["With count"]))};r.displayName="ComponentsNotificationBadgeReactDocs",r.pageData=c;var s=r}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.