Conversation
Nationwide Building society
GB
Last activity: 26 Jan 2026 9:04 EST
Banner widget automatically collapsing when it has 3 of more records
We have imported the banner widget from UI galley and have it successfully working, but we notice when it has 1/2 records it loads expanded but when it has 3 or more it loads collapsed. Is there a way to alter this so it's expanded even with 3 or more records?
Novitates
IN
Finding: OOTB behavior confirmed
The Banner component from @pega/cosmos-react-core (v8.4.1) sets the initial collapsed state based on message count.
Source code evidence:
In /node_modules/@pega/cosmos-react-core/lib/components/Banner/Banner.js at line 135:
const [collapsed, setCollapsed] = useState(count > 2);
Behavior:
- 1–2 messages: starts expanded (collapsed = false)
- 3+ messages: starts collapsed (collapsed = true)
Configuration options
The BannerProps interface (from Banner.d.ts) does not expose a prop to control the initial expanded/collapsed state.
Available props:
- variant
- headingText
- headingTag
- messages
- onDismisshandle
No prop like defaultExpanded, initialExpanded, or expanded exists.
Finding: OOTB behavior confirmed
The Banner component from @pega/cosmos-react-core (v8.4.1) sets the initial collapsed state based on message count.
Source code evidence:
In /node_modules/@pega/cosmos-react-core/lib/components/Banner/Banner.js at line 135:
const [collapsed, setCollapsed] = useState(count > 2);
Behavior:
- 1–2 messages: starts expanded (collapsed = false)
- 3+ messages: starts collapsed (collapsed = true)
Configuration options
The BannerProps interface (from Banner.d.ts) does not expose a prop to control the initial expanded/collapsed state.
Available props:
- variant
- headingText
- headingTag
- messages
- onDismisshandle
No prop like defaultExpanded, initialExpanded, or expanded exists.
Conclusion
- This is OOTB behavior and cannot be configured via props.
- To change it, you would need to:
- Wrap the Banner and manage expand/collapse state externally, or
- Use a custom Banner implementation, or
- Wait for a library update that adds this prop.
Below is the github link where we did a POC with option 1 and added few changes to the current component to make it work as per your requirement.
We have added a new flag to the component named "defaultExpanded". If you pass it as true, then regardless of the number of items in the banner it would show as expanded by default on load.
Important Note: This component code might not be PROD ready and is only intended to showcase the POC of the above mentioned requirement. Please ensure to review it with a seasoned UI developer and make changes if any/needed before you take it to higher environment.
Hope this helps. Happy coding !!!
Regards
JC
Pegasystems Inc.
GB
@JayachandraSiddipeta thanks for your detailed response. I would not have thought of option 1 honestly.
@HollyG17369606 I would of suggested option 2, build your own custom implementation of Banner. The Constellation UI Gallery is an open-source library, it is intended to be customized by projects to meet your specific needs, whilst also providing inspiration for the art of possible and best practices when using Pcore/Pconnect APIs.
We had a webinar recently on DX Components. @ongf1 and @Josh Helmbrecht do a much better job of explaining it :)