S-banner Component Missing Icon Customization Support (Unlike Polaris React Banner)

Polaris
1

Hi Shopify team,

While working with the s-banner web component, I noticed that there’s currently no way to customize or override the icon shown in the banner — unlike the Polaris React Banner component, which supports different icons based on the tone prop or allows a custom icon override.

Use Case:

In some scenarios, we need to use specific icons in banners based on the feature context (e.g., a lock icon for restricted access, or a custom icon to match a feature). This is easily done in Polaris React like this:

<Banner icon={LockMajor} tone="info" title="Access Restricted">
  You don’t have permission to access this section.
</Banner>

However, in the s-banner web component, there doesn’t appear to be any option or slot to change the icon. For example:

<s-banner tone="info" heading="Access Restricted">
  You don’t have permission to access this section.
</s-banner>

This always displays the default “info” icon, and there’s no way to override it with a custom one like a lock.

Request:

Could support be added to the s-banner component to:

  • Override the icon via an attribute or slot
  • Or provide a set of built-in icon options like in Polaris React

This would make s-banner much more versatile and consistent with the React version of Polaris.

Thanks in advance!

3

Hello, thanks for this feedback. At this point in time, we’ve intentionally limited icons to help convey the meaning behind each banner tone.

4

Hello Anthony, thanks for the update. Looking forward to more updates in the web components.