coinbase · haoruikun-cb · Feb 10, 2026 · Feb 9, 2026 · Feb 9, 2026 · Feb 10, 2026
diff --git a/apps/docs/docs/components/feedback/Banner/_webExamples.mdx b/apps/docs/docs/components/feedback/Banner/_webExamples.mdx
@@ -133,3 +133,25 @@ You can customize `borderRadius` to soften contextual and in-line banners.
 :::tip
 Avoid setting `borderRadius` for `styleVariant="global"` so the vertical status bar remains aligned.
 :::
+
+### Bleed with Margin Props
+
+When using negative `margin*` props to create a bleed effect, explicitly set `width` so the Banner expands beyond its container.
+
+```tsx live
+<VStack height={150} background="bgPositiveWash">
+  <Banner
+    marginX={-2}
+    startIcon="info"
+    startIconActive
+    styleVariant="contextual"
+    title="Bleeding banner"
+    variant="informational"
+    width="auto"
+  >
+    <Text as="p" font="label2">
+      Use with prop to override the default 100% width
+    </Text>
+  </Banner>
+</VStack>
+```
diff --git a/packages/common/CHANGELOG.md b/packages/common/CHANGELOG.md
@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.44.1 ((2/10/2026, 12:05 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.44.0 (2/9/2026 PST)
 
 #### 🚀 Updates

diff --git a/packages/common/package.json b/packages/common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-common",
-  "version": "8.44.0",
+  "version": "8.44.1",
   "description": "Coinbase Design System - Common",
   "repository": {
     "type": "git",

diff --git a/packages/mcp-server/CHANGELOG.md b/packages/mcp-server/CHANGELOG.md
@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.44.1 ((2/10/2026, 12:05 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.44.0 ((2/9/2026, 07:07 PM PST))
 
 This is an artificial version bump with no new change.

diff --git a/packages/mcp-server/package.json b/packages/mcp-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mcp-server",
-  "version": "8.44.0",
+  "version": "8.44.1",
   "description": "Coinbase Design System - MCP Server",
   "repository": {
     "type": "git",

diff --git a/packages/mobile/CHANGELOG.md b/packages/mobile/CHANGELOG.md
@@ -8,7 +8,9 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
-## Unreleased
+## 8.44.1 ((2/10/2026, 12:05 PM PST))
+
+This is an artificial version bump with no new change.
 
 #### 📘 Misc
 

diff --git a/packages/mobile/package.json b/packages/mobile/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.44.0",
+  "version": "8.44.1",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",

diff --git a/packages/web/CHANGELOG.md b/packages/web/CHANGELOG.md
@@ -8,7 +8,11 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
-## Unreleased
+## 8.44.1 (2/10/2026 PST)
+
+#### 🐞 Fixes
+
+- Enabled customer to override the width prop in Banner so they can explicitly pass in a width for any bleed effect. [[#383](https://github.com/coinbase/cds/pull/383)]
 
 #### 📘 Misc
 

diff --git a/packages/web/package.json b/packages/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.44.0",
+  "version": "8.44.1",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",

diff --git a/packages/web/src/banner/Banner.tsx b/packages/web/src/banner/Banner.tsx
@@ -118,6 +118,7 @@ export const Banner = memo(
         marginBottom,
         marginStart,
         marginEnd,
+        width = '100%',
         ...props
       }: BannerProps,
       ref: React.ForwardedRef<HTMLDivElement>,
@@ -201,7 +202,7 @@ export const Banner = memo(
       const content = (
         <Box
           position="relative"
-          width="100%"
+          width={width}
           {...(!showDismiss && marginStyles)}
           height="fit-content"
         >
@@ -301,7 +302,7 @@ export const Banner = memo(
           display="block"
           height="fit-content"
           position="relative"
-          width="100%"
+          width={width}
           {...marginStyles}
         >
           <Collapsible

diff --git a/packages/web/src/banner/__stories__/Banner.stories.tsx b/packages/web/src/banner/__stories__/Banner.stories.tsx
@@ -24,6 +24,7 @@ type ExampleProps = Pick<
   | 'startIconActive'
   | 'startIconAccessibilityLabel'
   | 'closeAccessibilityLabel'
+  | 'width'
 >;
 
 const exampleProps: ExampleProps = {
@@ -38,6 +39,7 @@ const examplePropsWithMargin: ExampleProps = {
   ...exampleProps,
   marginX: -2,
   children: shortMessage,
+  width: 'calc(100% + var(--space-4))',
 };
 
 const styleProps: BannerProps[] = [
@@ -282,7 +284,7 @@ export const BannerWithLink = () => {
 
 export const CustomMargin = () => {
   return (
-    <VStack gap={2} marginX={-0.5}>
+    <VStack gap={2} paddingX={2}>
       <Text as="h1" display="block" font="title1">
         Global
       </Text>