diff --git a/src/components/containers/Banner/Banner.module.scss b/src/components/containers/Banner/Banner.module.scss
index 27dc89e4..f2595305 100644
--- a/src/components/containers/Banner/Banner.module.scss
+++ b/src/components/containers/Banner/Banner.module.scss
@@ -11,7 +11,7 @@
     --bk-banner-color-foreground: #{bk.$theme-banner-informational-border-default};
     --bk-banner-color-background: #{bk.$theme-banner-informational-background-default};
     --bk-banner-border-radius: #{bk.$radius-2};
-    --bk-banner-indent: 30px;
+    --bk-banner-indent: #{bk.$spacing-9};
     
     overflow: hidden;
     
@@ -26,7 +26,8 @@
     
     display: flex;
     flex-direction: row;
-    align-items: center;
+    align-items: flex-start;
+    gap: bk.$spacing-4;
     
     min-width: 0;
     
@@ -41,10 +42,9 @@
       display: flex;
       flex-flow: row wrap;
       gap: bk.$spacing-1;
-      //@include bk.text-one-line;
       
       .bk-banner__title {
-        margin-inline-start: calc(-1 * var(--bk-banner-indent));
+        margin-inline-start: calc(-1 * (bk.$spacing-2 + 1.125em));
         
         min-width: 0;
         display: flex;
@@ -52,17 +52,15 @@
         gap: bk.$spacing-2;
         align-items: center;
         
-        //@include bk.text-one-line;
         font-weight: bk.$font-weight-semibold;
         
-        .bk-banner__title__text {
-          @include bk.text-one-line;
-        }
-        
         .bk-banner__title__icon {
-          flex-shrink: 0;
           color: var(--bk-banner-color-foreground);
         }
+        
+        .bk-banner__title__text {
+          @include bk.text-one-line;
+        }
       }
       
       .bk-banner__message {
@@ -70,64 +68,56 @@
       }
     }
     
-    .bk-banner__button {
-      padding: 0;
-      margin-right: bk.$spacing-5;
-    }
-    
-    .bk-banner__action {
-      height: bk.$spacing-5;
+    .bk-banner__actions {
+      display: flex;
+      flex-flow: row-reverse wrap;
+      align-items: center;
+      gap: bk.$spacing-1 bk.$spacing-7;
       
-      button {
-        border: 0;
-        font-weight: bk.$font-weight-semibold;
-        padding-bottom: 0;
-        padding-top: 0;
+      > * {
+        // Keep each item to a max of 1lh, so that in the case of all items being on one line, all the items
+        // are properly aligned with the title (which implicitly has height `1lh`).
+        max-height: 1lh;
       }
-    }
-    
-    .bk-banner__close-button {
-      flex-shrink: 0;
       
-      color: bk.$theme-banner-icon-default;
-      font-size: 1.2em;
-      padding: bk.$spacing-1;
+      .bk-banner__action {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        
+        button {
+          border: 0;
+          font-weight: bk.$font-weight-semibold;
+          padding: 0;
+        }
+      }
+      
+      .bk-banner__close-button {
+        flex: none;
+        
+        display: flex;
+        
+        font-size: 1.2em;
+        color: bk.$theme-banner-icon-default;
+      }
     }
     
-    
     // Variants
-    /*
     &.bk-banner--informational {
-      background-color: bk.$theme-banner-informational-background-default;
-      border-color: bk.$theme-banner-informational-border-default;
-      .bk-banner__icon {
-        color: bk.$color-blueberry-400;
-      }
-    }
-    
-    &.bk-banner--success {
-      background-color: bk.$theme-banner-success-background-default;
-      border-color: bk.$theme-banner-success-border-default;
-      .bk-banner__icon {
-        color: bk.$color-apple-400;
-      }
+      --bk-banner-color-foreground: #{bk.$theme-banner-informational-border-default};
+      --bk-banner-color-background: #{bk.$theme-banner-informational-background-default};
     }
-    
     &.bk-banner--warning {
-      background-color: bk.$theme-banner-warning-background-default;
-      border-color: bk.$theme-banner-warning-border-default;
-      .bk-banner__icon {
-        color: bk.$color-orange-400;
-      }
+      --bk-banner-color-foreground: #{bk.$theme-banner-warning-border-default};
+      --bk-banner-color-background: #{bk.$theme-banner-warning-background-default};
     }
-    
     &.bk-banner--error {
-      background-color: bk.$theme-banner-alert-background-default;
-      border-color: bk.$theme-banner-alert-border-default;
-      .bk-banner__icon {
-        color: bk.$color-cherry-400;
-      }
+      --bk-banner-color-foreground: #{bk.$theme-banner-alert-border-default};
+      --bk-banner-color-background: #{bk.$theme-banner-alert-background-default};
+    }
+    &.bk-banner--success {
+      --bk-banner-color-foreground: #{bk.$theme-banner-success-border-default};
+      --bk-banner-color-background: #{bk.$theme-banner-success-background-default};
     }
-    */
   }
 }
diff --git a/src/components/containers/Banner/Banner.stories.tsx b/src/components/containers/Banner/Banner.stories.tsx
index 976481f2..84a7dd11 100644
--- a/src/components/containers/Banner/Banner.stories.tsx
+++ b/src/components/containers/Banner/Banner.stories.tsx
@@ -98,127 +98,41 @@ export const BannerWithTitleOverflowAndTextWrap: Story = {
 };
 
 export const BannerInformational: Story = {
-  name: 'Success',
   args: {
-    title: 'Banner title',
-    closeButton: true,
     variant: 'informational',
-  },
-};
-
-export const BannerSuccess: Story = {
-  name: 'Success',
-  args: {
-    title: 'Banner title',
+    title: loremIpsum(),
+    message: <LoremIpsum/>,
     closeButton: true,
-    variant: 'success',
-  },
-};
-
-export const BannerSuccessWithNoCloseButton: Story = {
-  name: 'Success with no close button',
-  args: {
-    title: 'Banner title',
-    closeButton: false,
-    variant: 'success',
+    actions: <BannerActionExample/>,
   },
 };
 
-export const BannerSuccessWithMessage: Story = {
-  name: 'Success with message',
+export const BannerSuccess: Story = {
   args: {
-    title: 'Banner title',
-    message: 'Message',
-    closeButton: true,
     variant: 'success',
-  },
-};
-
-export const BannerSuccessWithButton: Story = {
-  name: 'Success with button',
-  args: {
-    title: 'Banner',
-    message: 'Message text',
+    title: loremIpsum(),
+    message: <LoremIpsum/>,
     closeButton: true,
-    variant: 'success',
     actions: <BannerActionExample/>,
   },
 };
 
 export const BannerWarning: Story = {
-  name: 'Warning',
   args: {
-    title: 'Banner title',
-    closeButton: true,
     variant: 'warning',
-  },
-};
-
-export const BannerWarningWithNoCloseButton: Story = {
-  name: 'Warning with no close button',
-  args: {
-    title: 'Banner title',
-    closeButton: false,
-    variant: 'warning',
-  },
-};
-
-export const BannerWarningWithMessage: Story = {
-  name: 'Warning with message',
-  args: {
-    title: 'Banner title',
-    message: 'Message',
-    closeButton: true,
-    variant: 'warning',
-  },
-};
-
-export const BannerWarningWithButton: Story = {
-  name: 'Warning with button',
-  args: {
-    title: 'Banner',
-    message: 'Message text',
+    title: loremIpsum(),
+    message: <LoremIpsum/>,
     closeButton: true,
-    variant: 'warning',
     actions: <BannerActionExample/>,
   },
 };
 
-export const BannerAlert: Story = {
-  name: 'Alert',
+export const BannerError: Story = {
   args: {
-    title: 'Banner title',
-    closeButton: true,
     variant: 'error',
-  },
-};
-
-export const BannerAlertWithNoCloseButton: Story = {
-  name: 'Alert with no close button',
-  args: {
-    title: 'Banner title',
-    closeButton: false,
-    variant: 'error',
-  },
-};
-
-export const BannerAlertWithMessage: Story = {
-  name: 'Alert with message',
-  args: {
-    title: 'Banner title',
-    message: 'Message',
-    closeButton: true,
-    variant: 'error',
-  },
-};
-
-export const BannerAlertWithButton: Story = {
-  name: 'Alert with button',
-  args: {
-    title: 'Banner',
-    message: 'Message text',
+    title: loremIpsum(),
+    message: <LoremIpsum/>,
     closeButton: true,
-    variant: 'error',
     actions: <BannerActionExample/>,
   },
 };
diff --git a/src/components/containers/Banner/Banner.tsx b/src/components/containers/Banner/Banner.tsx
index e191c085..687bcbe2 100644
--- a/src/components/containers/Banner/Banner.tsx
+++ b/src/components/containers/Banner/Banner.tsx
@@ -81,7 +81,9 @@ export const Banner = (props: BannerProps) => {
   
   return (
     <div
-      role="alert" // Note: if the banner is not time-sensitive, this may need to be overridden (depends on use case)
+      // Note: `role=alert` implies the banner is time-sensitive. If the banner is not time-sensitive, this may need to
+      // be overridden with a more appropriate role (depends on use case).
+      role="alert"
       {...propsRest}
       className={cx(
         'bk',
@@ -100,13 +102,14 @@ export const Banner = (props: BannerProps) => {
         }
       </div>
       
-      {actions}
-      
-      {closeButton &&
-        <Button className={cl['bk-banner__close-button']} onPress={onClose} aria-label="Close banner">
-          <Icon icon="cross"/>
-        </Button>
-      }
+      <div className={cl['bk-banner__actions']}>
+        {closeButton &&
+          <Button unstyled className={cl['bk-banner__close-button']} onPress={onClose} aria-label="Close banner">
+            <Icon icon="cross"/>
+          </Button>
+        }
+        {actions}
+      </div>
     </div>
   );
 };