diff --git a/.changeset/new-rice-punch.md b/.changeset/new-rice-punch.md
new file mode 100644
index 000000000..c748c3f19
--- /dev/null
+++ b/.changeset/new-rice-punch.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-banner": patch
+---
+
+Banner: Fix styling issue where buttons are cropped when used as a custom action
diff --git a/__docs__/wonder-blocks-banner/banner.stories.tsx b/__docs__/wonder-blocks-banner/banner.stories.tsx
index acf47c9c5..ad782f895 100644
--- a/__docs__/wonder-blocks-banner/banner.stories.tsx
+++ b/__docs__/wonder-blocks-banner/banner.stories.tsx
@@ -430,6 +430,31 @@ export const WithCustomAction: StoryComponentType = {
     ),
 };
 
+/**
+ * **NOTE: Custom actions are discouraged and should only be used as a last resort!**.
+ *
+ * Another example with a custom action using a primary button.
+ * See **With Custom Action** story for more details.
+ */
+export const WithCustomActionPrimary: StoryComponentType = {
+    render: () => (
+        <Banner
+            text="some text"
+            layout="floating"
+            actions={[
+                {
+                    type: "custom",
+                    node: (
+                        <Button size="small" onClick={() => {}}>
+                            Custom Action
+                        </Button>
+                    ),
+                },
+            ]}
+        />
+    ),
+};
+
 /**
  * Here is an example that includes both a normal action and a custom action.
  */
@@ -452,6 +477,14 @@ export const WithMixedActions: StoryComponentType = {
                         </Button>
                     ),
                 },
+                {
+                    type: "custom",
+                    node: (
+                        <Button size="small" onClick={() => {}}>
+                            Custom button 2
+                        </Button>
+                    ),
+                },
                 {
                     type: "custom",
                     node: (
diff --git a/packages/wonder-blocks-banner/src/components/banner.tsx b/packages/wonder-blocks-banner/src/components/banner.tsx
index 77ffc241e..7d9a4dfb6 100644
--- a/packages/wonder-blocks-banner/src/components/banner.tsx
+++ b/packages/wonder-blocks-banner/src/components/banner.tsx
@@ -349,13 +349,14 @@ const styles = StyleSheet.create({
         justifyContent: "flex-start",
         marginTop: spacing.xSmall_8,
         marginBottom: spacing.xSmall_8,
+        // Set the height to remove the padding from buttons
+        height: 18,
+        alignItems: "center",
     },
     action: {
         marginLeft: spacing.xSmall_8,
         marginRight: spacing.xSmall_8,
         justifyContent: "center",
-        // Set the height to remove the padding from buttons
-        height: 18,
     },
     link: {
         fontSize: 14,