diff --git a/.changeset/fluffy-beers-reply.md b/.changeset/fluffy-beers-reply.md
new file mode 100644
index 000000000..cb7254807
--- /dev/null
+++ b/.changeset/fluffy-beers-reply.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-button": minor
+---
+
+Add `labelStyle` to override the styles of the internal label
diff --git a/__docs__/wonder-blocks-button/button.argtypes.ts b/__docs__/wonder-blocks-button/button.argtypes.ts
index b1b11d98a..18efd5a7a 100644
--- a/__docs__/wonder-blocks-button/button.argtypes.ts
+++ b/__docs__/wonder-blocks-button/button.argtypes.ts
@@ -139,6 +139,15 @@ export default {
             },
         },
     },
+    labelStyle: {
+        description: "Optional custom styles for the inner label.",
+        table: {
+            category: "Layout",
+            type: {
+                summary: "StyleType",
+            },
+        },
+    },
     className: {
         description: "Adds CSS classes to the Button.",
         control: {type: "text"},
diff --git a/__docs__/wonder-blocks-button/button.stories.tsx b/__docs__/wonder-blocks-button/button.stories.tsx
index 8423502d3..8b154f0ab 100644
--- a/__docs__/wonder-blocks-button/button.stories.tsx
+++ b/__docs__/wonder-blocks-button/button.stories.tsx
@@ -16,7 +16,11 @@ import Color from "@khanacademy/wonder-blocks-color";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
-import {LabelMedium, LabelLarge} from "@khanacademy/wonder-blocks-typography";
+import {
+    LabelMedium,
+    LabelLarge,
+    HeadingSmall,
+} from "@khanacademy/wonder-blocks-typography";
 
 import Button from "@khanacademy/wonder-blocks-button";
 import packageConfig from "../../packages/wonder-blocks-button/package.json";
@@ -71,6 +75,7 @@ export const Default: StoryComponentType = {
         light: false,
         disabled: false,
         style: {maxWidth: 200},
+        labelStyle: {},
         onClick: () => {
             // eslint-disable-next-line no-alert
             alert("Click!");
@@ -100,7 +105,7 @@ export const Tertiary: StoryComponentType = {
 
         // Get HTML elements
         const button = canvas.getByRole("button");
-        const computedStyleButton = getComputedStyle(button, ":after");
+        const computedStyleButton = getComputedStyle(button);
         const innerLabel = canvas.getByTestId("test-button-inner-label");
         const computedStyleLabel = getComputedStyle(innerLabel, ":after");
 
@@ -115,8 +120,10 @@ export const Tertiary: StoryComponentType = {
 
         // Focus style
         await fireEvent.focus(button);
-        await expect(computedStyleButton.borderColor).toBe("rgb(24, 101, 242)");
-        await expect(computedStyleButton.borderWidth).toBe("2px");
+        await expect(computedStyleButton.outlineColor).toBe(
+            "rgb(24, 101, 242)",
+        );
+        await expect(computedStyleButton.outlineWidth).toBe("2px");
 
         // Active (mouse down) style
         // eslint-disable-next-line testing-library/prefer-user-event
@@ -591,6 +598,51 @@ TruncatingLabels.parameters = {
     },
 };
 
+/**
+ * Buttons can be styled with custom styles. This story shows a button with a
+ * custom width and height (using the `style` prop), and also a custom label
+ * style that prevents the label from being truncated (`labelStyle`).
+ *
+ * __NOTE:__ Please use this feature sparingly. This could be useful for simple
+ * cases like the one shown below, but it could cause some issues if used in
+ * more complex cases.
+ */
+export const CustomStyles = {
+    args: {
+        children: `This button does not truncate its label and can appear in multiple lines`,
+        disabled: false,
+        kind: "secondary",
+        onClick: () => {},
+        style: {
+            maxWidth: 200,
+            minHeight: 32,
+            height: "auto",
+        },
+        labelStyle: {
+            textOverflow: "initial",
+            whiteSpace: "normal",
+        },
+    },
+    render: (args: any) => (
+        <View style={{gap: Spacing.medium_16}}>
+            <HeadingSmall>Wonder Blocks theme (default)</HeadingSmall>
+            <View style={{flexDirection: "row", gap: Spacing.medium_16}}>
+                <Button {...args} kind="primary" />
+                <Button {...args} kind="secondary" />
+                <Button {...args} kind="tertiary" />
+            </View>
+            <HeadingSmall>Khanmigo theme</HeadingSmall>
+            <View style={{flexDirection: "row", gap: Spacing.medium_16}}>
+                <ThemeSwitcherContext.Provider value="khanmigo">
+                    <Button {...args} kind="primary" />
+                    <Button {...args} kind="secondary" />
+                    <Button {...args} kind="tertiary" />
+                </ThemeSwitcherContext.Provider>
+            </View>
+        </View>
+    ),
+};
+
 export const SubmittingForms: StoryComponentType = {
     name: "Submitting forms",
     render: () => (
diff --git a/packages/wonder-blocks-button/src/__tests__/__snapshots__/custom-snapshot.test.tsx.snap b/packages/wonder-blocks-button/src/__tests__/__snapshots__/custom-snapshot.test.tsx.snap
index 84f8c927c..afd15b9cc 100644
--- a/packages/wonder-blocks-button/src/__tests__/__snapshots__/custom-snapshot.test.tsx.snap
+++ b/packages/wonder-blocks-button/src/__tests__/__snapshots__/custom-snapshot.test.tsx.snap
@@ -4142,18 +4142,13 @@ exports[`ButtonCore kind:secondary color:default size:large light:false disabled
         "border": 0,
       },
       ":focus": {
-        "borderColor": "rgba(33,36,44,0.32)",
-        "borderWidth": 2,
-        "paddingLeft": 31,
-        "paddingRight": 31,
+        "outlineColor": "rgba(33,36,44,0.32)",
+        "outlineWidth": 2,
       },
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "rgba(33,36,44,0.32)",
       "borderRadius": 6,
-      "borderStyle": "solid",
-      "borderWidth": 1,
       "boxSizing": "border-box",
       "color": "rgba(33,36,44,0.32)",
       "cursor": "default",
@@ -4162,6 +4157,10 @@ exports[`ButtonCore kind:secondary color:default size:large light:false disabled
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "rgba(33,36,44,0.32)",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 1,
       "paddingBottom": 0,
       "paddingLeft": 32,
       "paddingRight": 32,
@@ -4228,10 +4227,7 @@ exports[`ButtonCore kind:secondary color:default size:large light:false focused
       "alignItems": "center",
       "background": "#ffffff",
       "border": "none",
-      "borderColor": "#1865f2",
       "borderRadius": 6,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#1865f2",
       "cursor": "pointer",
@@ -4240,9 +4236,13 @@ exports[`ButtonCore kind:secondary color:default size:large light:false focused
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#1865f2",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 31,
-      "paddingRight": 31,
+      "paddingLeft": 32,
+      "paddingRight": 32,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -4306,10 +4306,7 @@ exports[`ButtonCore kind:secondary color:default size:large light:false hovered
       "alignItems": "center",
       "background": "#ffffff",
       "border": "none",
-      "borderColor": "#1865f2",
       "borderRadius": 6,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#1865f2",
       "cursor": "pointer",
@@ -4318,9 +4315,13 @@ exports[`ButtonCore kind:secondary color:default size:large light:false hovered
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#1865f2",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 31,
-      "paddingRight": 31,
+      "paddingLeft": 32,
+      "paddingRight": 32,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -4384,10 +4385,7 @@ exports[`ButtonCore kind:secondary color:default size:large light:false pressed
       "alignItems": "center",
       "background": "#b5cefb",
       "border": "none",
-      "borderColor": "#1b50b3",
       "borderRadius": 6,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#1b50b3",
       "cursor": "pointer",
@@ -4396,9 +4394,13 @@ exports[`ButtonCore kind:secondary color:default size:large light:false pressed
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#1b50b3",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 31,
-      "paddingRight": 31,
+      "paddingLeft": 32,
+      "paddingRight": 32,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -4457,18 +4459,13 @@ exports[`ButtonCore kind:secondary color:default size:large light:true disabled
         "border": 0,
       },
       ":focus": {
-        "borderColor": "rgba(255,255,255,0.50)",
-        "borderWidth": 2,
-        "paddingLeft": 31,
-        "paddingRight": 31,
+        "outlineColor": "rgba(255,255,255,0.50)",
+        "outlineWidth": 2,
       },
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#b5cefb",
       "borderRadius": 6,
-      "borderStyle": "solid",
-      "borderWidth": 1,
       "boxSizing": "border-box",
       "color": "rgba(255,255,255,0.50)",
       "cursor": "default",
@@ -4477,6 +4474,10 @@ exports[`ButtonCore kind:secondary color:default size:large light:true disabled
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#b5cefb",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 1,
       "paddingBottom": 0,
       "paddingLeft": 32,
       "paddingRight": 32,
@@ -4543,10 +4544,7 @@ exports[`ButtonCore kind:secondary color:default size:large light:true focused 1
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#ffffff",
       "borderRadius": 6,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#ffffff",
       "cursor": "pointer",
@@ -4555,9 +4553,13 @@ exports[`ButtonCore kind:secondary color:default size:large light:true focused 1
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#ffffff",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 31,
-      "paddingRight": 31,
+      "paddingLeft": 32,
+      "paddingRight": 32,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -4621,10 +4623,7 @@ exports[`ButtonCore kind:secondary color:default size:large light:true hovered 1
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#ffffff",
       "borderRadius": 6,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#ffffff",
       "cursor": "pointer",
@@ -4633,9 +4632,13 @@ exports[`ButtonCore kind:secondary color:default size:large light:true hovered 1
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#ffffff",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 31,
-      "paddingRight": 31,
+      "paddingLeft": 32,
+      "paddingRight": 32,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -4699,10 +4702,7 @@ exports[`ButtonCore kind:secondary color:default size:large light:true pressed 1
       "alignItems": "center",
       "background": "#1b50b3",
       "border": "none",
-      "borderColor": "#b5cefb",
       "borderRadius": 6,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#b5cefb",
       "cursor": "pointer",
@@ -4711,9 +4711,13 @@ exports[`ButtonCore kind:secondary color:default size:large light:true pressed 1
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#b5cefb",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 31,
-      "paddingRight": 31,
+      "paddingLeft": 32,
+      "paddingRight": 32,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -4772,18 +4776,13 @@ exports[`ButtonCore kind:secondary color:default size:medium light:false disable
         "border": 0,
       },
       ":focus": {
-        "borderColor": "rgba(33,36,44,0.32)",
-        "borderWidth": 2,
-        "paddingLeft": 15,
-        "paddingRight": 15,
+        "outlineColor": "rgba(33,36,44,0.32)",
+        "outlineWidth": 2,
       },
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "rgba(33,36,44,0.32)",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 1,
       "boxSizing": "border-box",
       "color": "rgba(33,36,44,0.32)",
       "cursor": "default",
@@ -4792,6 +4791,10 @@ exports[`ButtonCore kind:secondary color:default size:medium light:false disable
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "rgba(33,36,44,0.32)",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 1,
       "paddingBottom": 0,
       "paddingLeft": 16,
       "paddingRight": 16,
@@ -4858,10 +4861,7 @@ exports[`ButtonCore kind:secondary color:default size:medium light:false focused
       "alignItems": "center",
       "background": "#ffffff",
       "border": "none",
-      "borderColor": "#1865f2",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#1865f2",
       "cursor": "pointer",
@@ -4870,9 +4870,13 @@ exports[`ButtonCore kind:secondary color:default size:medium light:false focused
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#1865f2",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 15,
-      "paddingRight": 15,
+      "paddingLeft": 16,
+      "paddingRight": 16,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -4936,10 +4940,7 @@ exports[`ButtonCore kind:secondary color:default size:medium light:false hovered
       "alignItems": "center",
       "background": "#ffffff",
       "border": "none",
-      "borderColor": "#1865f2",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#1865f2",
       "cursor": "pointer",
@@ -4948,9 +4949,13 @@ exports[`ButtonCore kind:secondary color:default size:medium light:false hovered
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#1865f2",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 15,
-      "paddingRight": 15,
+      "paddingLeft": 16,
+      "paddingRight": 16,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -5014,10 +5019,7 @@ exports[`ButtonCore kind:secondary color:default size:medium light:false pressed
       "alignItems": "center",
       "background": "#b5cefb",
       "border": "none",
-      "borderColor": "#1b50b3",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#1b50b3",
       "cursor": "pointer",
@@ -5026,9 +5028,13 @@ exports[`ButtonCore kind:secondary color:default size:medium light:false pressed
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#1b50b3",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 15,
-      "paddingRight": 15,
+      "paddingLeft": 16,
+      "paddingRight": 16,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -5087,18 +5093,13 @@ exports[`ButtonCore kind:secondary color:default size:medium light:true disabled
         "border": 0,
       },
       ":focus": {
-        "borderColor": "rgba(255,255,255,0.50)",
-        "borderWidth": 2,
-        "paddingLeft": 15,
-        "paddingRight": 15,
+        "outlineColor": "rgba(255,255,255,0.50)",
+        "outlineWidth": 2,
       },
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#b5cefb",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 1,
       "boxSizing": "border-box",
       "color": "rgba(255,255,255,0.50)",
       "cursor": "default",
@@ -5107,6 +5108,10 @@ exports[`ButtonCore kind:secondary color:default size:medium light:true disabled
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#b5cefb",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 1,
       "paddingBottom": 0,
       "paddingLeft": 16,
       "paddingRight": 16,
@@ -5173,10 +5178,7 @@ exports[`ButtonCore kind:secondary color:default size:medium light:true focused
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#ffffff",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#ffffff",
       "cursor": "pointer",
@@ -5185,9 +5187,13 @@ exports[`ButtonCore kind:secondary color:default size:medium light:true focused
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#ffffff",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 15,
-      "paddingRight": 15,
+      "paddingLeft": 16,
+      "paddingRight": 16,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -5251,10 +5257,7 @@ exports[`ButtonCore kind:secondary color:default size:medium light:true hovered
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#ffffff",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#ffffff",
       "cursor": "pointer",
@@ -5263,9 +5266,13 @@ exports[`ButtonCore kind:secondary color:default size:medium light:true hovered
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#ffffff",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 15,
-      "paddingRight": 15,
+      "paddingLeft": 16,
+      "paddingRight": 16,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -5329,10 +5336,7 @@ exports[`ButtonCore kind:secondary color:default size:medium light:true pressed
       "alignItems": "center",
       "background": "#1b50b3",
       "border": "none",
-      "borderColor": "#b5cefb",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#b5cefb",
       "cursor": "pointer",
@@ -5341,9 +5345,13 @@ exports[`ButtonCore kind:secondary color:default size:medium light:true pressed
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#b5cefb",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 15,
-      "paddingRight": 15,
+      "paddingLeft": 16,
+      "paddingRight": 16,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -5402,18 +5410,13 @@ exports[`ButtonCore kind:secondary color:default size:small light:false disabled
         "border": 0,
       },
       ":focus": {
-        "borderColor": "rgba(33,36,44,0.32)",
-        "borderWidth": 2,
-        "paddingLeft": 15,
-        "paddingRight": 15,
+        "outlineColor": "rgba(33,36,44,0.32)",
+        "outlineWidth": 2,
       },
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "rgba(33,36,44,0.32)",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 1,
       "boxSizing": "border-box",
       "color": "rgba(33,36,44,0.32)",
       "cursor": "default",
@@ -5422,6 +5425,10 @@ exports[`ButtonCore kind:secondary color:default size:small light:false disabled
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "rgba(33,36,44,0.32)",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 1,
       "paddingBottom": 0,
       "paddingLeft": 16,
       "paddingRight": 16,
@@ -5488,10 +5495,7 @@ exports[`ButtonCore kind:secondary color:default size:small light:false focused
       "alignItems": "center",
       "background": "#ffffff",
       "border": "none",
-      "borderColor": "#1865f2",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#1865f2",
       "cursor": "pointer",
@@ -5500,9 +5504,13 @@ exports[`ButtonCore kind:secondary color:default size:small light:false focused
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#1865f2",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 15,
-      "paddingRight": 15,
+      "paddingLeft": 16,
+      "paddingRight": 16,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -5566,10 +5574,7 @@ exports[`ButtonCore kind:secondary color:default size:small light:false hovered
       "alignItems": "center",
       "background": "#ffffff",
       "border": "none",
-      "borderColor": "#1865f2",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#1865f2",
       "cursor": "pointer",
@@ -5578,9 +5583,13 @@ exports[`ButtonCore kind:secondary color:default size:small light:false hovered
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#1865f2",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 15,
-      "paddingRight": 15,
+      "paddingLeft": 16,
+      "paddingRight": 16,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -5644,10 +5653,7 @@ exports[`ButtonCore kind:secondary color:default size:small light:false pressed
       "alignItems": "center",
       "background": "#b5cefb",
       "border": "none",
-      "borderColor": "#1b50b3",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#1b50b3",
       "cursor": "pointer",
@@ -5656,9 +5662,13 @@ exports[`ButtonCore kind:secondary color:default size:small light:false pressed
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#1b50b3",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 15,
-      "paddingRight": 15,
+      "paddingLeft": 16,
+      "paddingRight": 16,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -5717,18 +5727,13 @@ exports[`ButtonCore kind:secondary color:default size:small light:true disabled
         "border": 0,
       },
       ":focus": {
-        "borderColor": "rgba(255,255,255,0.50)",
-        "borderWidth": 2,
-        "paddingLeft": 15,
-        "paddingRight": 15,
+        "outlineColor": "rgba(255,255,255,0.50)",
+        "outlineWidth": 2,
       },
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#b5cefb",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 1,
       "boxSizing": "border-box",
       "color": "rgba(255,255,255,0.50)",
       "cursor": "default",
@@ -5737,6 +5742,10 @@ exports[`ButtonCore kind:secondary color:default size:small light:true disabled
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#b5cefb",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 1,
       "paddingBottom": 0,
       "paddingLeft": 16,
       "paddingRight": 16,
@@ -5803,10 +5812,7 @@ exports[`ButtonCore kind:secondary color:default size:small light:true focused 1
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#ffffff",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#ffffff",
       "cursor": "pointer",
@@ -5815,9 +5821,13 @@ exports[`ButtonCore kind:secondary color:default size:small light:true focused 1
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#ffffff",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 15,
-      "paddingRight": 15,
+      "paddingLeft": 16,
+      "paddingRight": 16,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -5881,10 +5891,7 @@ exports[`ButtonCore kind:secondary color:default size:small light:true hovered 1
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#ffffff",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#ffffff",
       "cursor": "pointer",
@@ -5893,9 +5900,13 @@ exports[`ButtonCore kind:secondary color:default size:small light:true hovered 1
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#ffffff",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 15,
-      "paddingRight": 15,
+      "paddingLeft": 16,
+      "paddingRight": 16,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -5959,10 +5970,7 @@ exports[`ButtonCore kind:secondary color:default size:small light:true pressed 1
       "alignItems": "center",
       "background": "#1b50b3",
       "border": "none",
-      "borderColor": "#b5cefb",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#b5cefb",
       "cursor": "pointer",
@@ -5971,9 +5979,13 @@ exports[`ButtonCore kind:secondary color:default size:small light:true pressed 1
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#b5cefb",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 15,
-      "paddingRight": 15,
+      "paddingLeft": 16,
+      "paddingRight": 16,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -6032,18 +6044,13 @@ exports[`ButtonCore kind:secondary color:destructive size:large light:false disa
         "border": 0,
       },
       ":focus": {
-        "borderColor": "rgba(33,36,44,0.32)",
-        "borderWidth": 2,
-        "paddingLeft": 31,
-        "paddingRight": 31,
+        "outlineColor": "rgba(33,36,44,0.32)",
+        "outlineWidth": 2,
       },
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "rgba(33,36,44,0.32)",
       "borderRadius": 6,
-      "borderStyle": "solid",
-      "borderWidth": 1,
       "boxSizing": "border-box",
       "color": "rgba(33,36,44,0.32)",
       "cursor": "default",
@@ -6052,6 +6059,10 @@ exports[`ButtonCore kind:secondary color:destructive size:large light:false disa
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "rgba(33,36,44,0.32)",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 1,
       "paddingBottom": 0,
       "paddingLeft": 32,
       "paddingRight": 32,
@@ -6118,10 +6129,7 @@ exports[`ButtonCore kind:secondary color:destructive size:large light:false focu
       "alignItems": "center",
       "background": "#ffffff",
       "border": "none",
-      "borderColor": "#d92916",
       "borderRadius": 6,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#d92916",
       "cursor": "pointer",
@@ -6130,9 +6138,13 @@ exports[`ButtonCore kind:secondary color:destructive size:large light:false focu
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#d92916",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 31,
-      "paddingRight": 31,
+      "paddingLeft": 32,
+      "paddingRight": 32,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -6196,10 +6208,7 @@ exports[`ButtonCore kind:secondary color:destructive size:large light:false hove
       "alignItems": "center",
       "background": "#ffffff",
       "border": "none",
-      "borderColor": "#d92916",
       "borderRadius": 6,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#d92916",
       "cursor": "pointer",
@@ -6208,9 +6217,13 @@ exports[`ButtonCore kind:secondary color:destructive size:large light:false hove
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#d92916",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 31,
-      "paddingRight": 31,
+      "paddingLeft": 32,
+      "paddingRight": 32,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -6274,10 +6287,7 @@ exports[`ButtonCore kind:secondary color:destructive size:large light:false pres
       "alignItems": "center",
       "background": "#f3bbb4",
       "border": "none",
-      "borderColor": "#9e271d",
       "borderRadius": 6,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#9e271d",
       "cursor": "pointer",
@@ -6286,9 +6296,13 @@ exports[`ButtonCore kind:secondary color:destructive size:large light:false pres
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#9e271d",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 31,
-      "paddingRight": 31,
+      "paddingLeft": 32,
+      "paddingRight": 32,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -6347,18 +6361,13 @@ exports[`ButtonCore kind:secondary color:destructive size:large light:true disab
         "border": 0,
       },
       ":focus": {
-        "borderColor": "rgba(255,255,255,0.50)",
-        "borderWidth": 2,
-        "paddingLeft": 31,
-        "paddingRight": 31,
+        "outlineColor": "rgba(255,255,255,0.50)",
+        "outlineWidth": 2,
       },
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#f3bbb4",
       "borderRadius": 6,
-      "borderStyle": "solid",
-      "borderWidth": 1,
       "boxSizing": "border-box",
       "color": "rgba(255,255,255,0.50)",
       "cursor": "default",
@@ -6367,6 +6376,10 @@ exports[`ButtonCore kind:secondary color:destructive size:large light:true disab
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#f3bbb4",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 1,
       "paddingBottom": 0,
       "paddingLeft": 32,
       "paddingRight": 32,
@@ -6433,10 +6446,7 @@ exports[`ButtonCore kind:secondary color:destructive size:large light:true focus
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#ffffff",
       "borderRadius": 6,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#ffffff",
       "cursor": "pointer",
@@ -6445,9 +6455,13 @@ exports[`ButtonCore kind:secondary color:destructive size:large light:true focus
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#ffffff",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 31,
-      "paddingRight": 31,
+      "paddingLeft": 32,
+      "paddingRight": 32,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -6511,10 +6525,7 @@ exports[`ButtonCore kind:secondary color:destructive size:large light:true hover
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#ffffff",
       "borderRadius": 6,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#ffffff",
       "cursor": "pointer",
@@ -6523,9 +6534,13 @@ exports[`ButtonCore kind:secondary color:destructive size:large light:true hover
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#ffffff",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 31,
-      "paddingRight": 31,
+      "paddingLeft": 32,
+      "paddingRight": 32,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -6589,10 +6604,7 @@ exports[`ButtonCore kind:secondary color:destructive size:large light:true press
       "alignItems": "center",
       "background": "#9e271d",
       "border": "none",
-      "borderColor": "#f3bbb4",
       "borderRadius": 6,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#f3bbb4",
       "cursor": "pointer",
@@ -6601,9 +6613,13 @@ exports[`ButtonCore kind:secondary color:destructive size:large light:true press
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#f3bbb4",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 31,
-      "paddingRight": 31,
+      "paddingLeft": 32,
+      "paddingRight": 32,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -6662,18 +6678,13 @@ exports[`ButtonCore kind:secondary color:destructive size:medium light:false dis
         "border": 0,
       },
       ":focus": {
-        "borderColor": "rgba(33,36,44,0.32)",
-        "borderWidth": 2,
-        "paddingLeft": 15,
-        "paddingRight": 15,
+        "outlineColor": "rgba(33,36,44,0.32)",
+        "outlineWidth": 2,
       },
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "rgba(33,36,44,0.32)",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 1,
       "boxSizing": "border-box",
       "color": "rgba(33,36,44,0.32)",
       "cursor": "default",
@@ -6682,6 +6693,10 @@ exports[`ButtonCore kind:secondary color:destructive size:medium light:false dis
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "rgba(33,36,44,0.32)",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 1,
       "paddingBottom": 0,
       "paddingLeft": 16,
       "paddingRight": 16,
@@ -6748,10 +6763,7 @@ exports[`ButtonCore kind:secondary color:destructive size:medium light:false foc
       "alignItems": "center",
       "background": "#ffffff",
       "border": "none",
-      "borderColor": "#d92916",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#d92916",
       "cursor": "pointer",
@@ -6760,9 +6772,13 @@ exports[`ButtonCore kind:secondary color:destructive size:medium light:false foc
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#d92916",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 15,
-      "paddingRight": 15,
+      "paddingLeft": 16,
+      "paddingRight": 16,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -6826,10 +6842,7 @@ exports[`ButtonCore kind:secondary color:destructive size:medium light:false hov
       "alignItems": "center",
       "background": "#ffffff",
       "border": "none",
-      "borderColor": "#d92916",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#d92916",
       "cursor": "pointer",
@@ -6838,9 +6851,13 @@ exports[`ButtonCore kind:secondary color:destructive size:medium light:false hov
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#d92916",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 15,
-      "paddingRight": 15,
+      "paddingLeft": 16,
+      "paddingRight": 16,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -6904,10 +6921,7 @@ exports[`ButtonCore kind:secondary color:destructive size:medium light:false pre
       "alignItems": "center",
       "background": "#f3bbb4",
       "border": "none",
-      "borderColor": "#9e271d",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#9e271d",
       "cursor": "pointer",
@@ -6916,9 +6930,13 @@ exports[`ButtonCore kind:secondary color:destructive size:medium light:false pre
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#9e271d",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 15,
-      "paddingRight": 15,
+      "paddingLeft": 16,
+      "paddingRight": 16,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -6977,18 +6995,13 @@ exports[`ButtonCore kind:secondary color:destructive size:medium light:true disa
         "border": 0,
       },
       ":focus": {
-        "borderColor": "rgba(255,255,255,0.50)",
-        "borderWidth": 2,
-        "paddingLeft": 15,
-        "paddingRight": 15,
+        "outlineColor": "rgba(255,255,255,0.50)",
+        "outlineWidth": 2,
       },
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#f3bbb4",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 1,
       "boxSizing": "border-box",
       "color": "rgba(255,255,255,0.50)",
       "cursor": "default",
@@ -6997,6 +7010,10 @@ exports[`ButtonCore kind:secondary color:destructive size:medium light:true disa
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#f3bbb4",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 1,
       "paddingBottom": 0,
       "paddingLeft": 16,
       "paddingRight": 16,
@@ -7063,10 +7080,7 @@ exports[`ButtonCore kind:secondary color:destructive size:medium light:true focu
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#ffffff",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#ffffff",
       "cursor": "pointer",
@@ -7075,9 +7089,13 @@ exports[`ButtonCore kind:secondary color:destructive size:medium light:true focu
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#ffffff",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 15,
-      "paddingRight": 15,
+      "paddingLeft": 16,
+      "paddingRight": 16,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -7141,10 +7159,7 @@ exports[`ButtonCore kind:secondary color:destructive size:medium light:true hove
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#ffffff",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#ffffff",
       "cursor": "pointer",
@@ -7153,9 +7168,13 @@ exports[`ButtonCore kind:secondary color:destructive size:medium light:true hove
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#ffffff",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 15,
-      "paddingRight": 15,
+      "paddingLeft": 16,
+      "paddingRight": 16,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -7219,10 +7238,7 @@ exports[`ButtonCore kind:secondary color:destructive size:medium light:true pres
       "alignItems": "center",
       "background": "#9e271d",
       "border": "none",
-      "borderColor": "#f3bbb4",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#f3bbb4",
       "cursor": "pointer",
@@ -7231,9 +7247,13 @@ exports[`ButtonCore kind:secondary color:destructive size:medium light:true pres
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#f3bbb4",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 15,
-      "paddingRight": 15,
+      "paddingLeft": 16,
+      "paddingRight": 16,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -7292,18 +7312,13 @@ exports[`ButtonCore kind:secondary color:destructive size:small light:false disa
         "border": 0,
       },
       ":focus": {
-        "borderColor": "rgba(33,36,44,0.32)",
-        "borderWidth": 2,
-        "paddingLeft": 15,
-        "paddingRight": 15,
+        "outlineColor": "rgba(33,36,44,0.32)",
+        "outlineWidth": 2,
       },
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "rgba(33,36,44,0.32)",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 1,
       "boxSizing": "border-box",
       "color": "rgba(33,36,44,0.32)",
       "cursor": "default",
@@ -7312,6 +7327,10 @@ exports[`ButtonCore kind:secondary color:destructive size:small light:false disa
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "rgba(33,36,44,0.32)",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 1,
       "paddingBottom": 0,
       "paddingLeft": 16,
       "paddingRight": 16,
@@ -7378,10 +7397,7 @@ exports[`ButtonCore kind:secondary color:destructive size:small light:false focu
       "alignItems": "center",
       "background": "#ffffff",
       "border": "none",
-      "borderColor": "#d92916",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#d92916",
       "cursor": "pointer",
@@ -7390,9 +7406,13 @@ exports[`ButtonCore kind:secondary color:destructive size:small light:false focu
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#d92916",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 15,
-      "paddingRight": 15,
+      "paddingLeft": 16,
+      "paddingRight": 16,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -7456,10 +7476,7 @@ exports[`ButtonCore kind:secondary color:destructive size:small light:false hove
       "alignItems": "center",
       "background": "#ffffff",
       "border": "none",
-      "borderColor": "#d92916",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#d92916",
       "cursor": "pointer",
@@ -7468,9 +7485,13 @@ exports[`ButtonCore kind:secondary color:destructive size:small light:false hove
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#d92916",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 15,
-      "paddingRight": 15,
+      "paddingLeft": 16,
+      "paddingRight": 16,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -7534,10 +7555,7 @@ exports[`ButtonCore kind:secondary color:destructive size:small light:false pres
       "alignItems": "center",
       "background": "#f3bbb4",
       "border": "none",
-      "borderColor": "#9e271d",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#9e271d",
       "cursor": "pointer",
@@ -7546,9 +7564,13 @@ exports[`ButtonCore kind:secondary color:destructive size:small light:false pres
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#9e271d",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 15,
-      "paddingRight": 15,
+      "paddingLeft": 16,
+      "paddingRight": 16,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -7607,18 +7629,13 @@ exports[`ButtonCore kind:secondary color:destructive size:small light:true disab
         "border": 0,
       },
       ":focus": {
-        "borderColor": "rgba(255,255,255,0.50)",
-        "borderWidth": 2,
-        "paddingLeft": 15,
-        "paddingRight": 15,
+        "outlineColor": "rgba(255,255,255,0.50)",
+        "outlineWidth": 2,
       },
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#f3bbb4",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 1,
       "boxSizing": "border-box",
       "color": "rgba(255,255,255,0.50)",
       "cursor": "default",
@@ -7627,6 +7644,10 @@ exports[`ButtonCore kind:secondary color:destructive size:small light:true disab
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#f3bbb4",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 1,
       "paddingBottom": 0,
       "paddingLeft": 16,
       "paddingRight": 16,
@@ -7693,10 +7714,7 @@ exports[`ButtonCore kind:secondary color:destructive size:small light:true focus
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#ffffff",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#ffffff",
       "cursor": "pointer",
@@ -7705,9 +7723,13 @@ exports[`ButtonCore kind:secondary color:destructive size:small light:true focus
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#ffffff",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 15,
-      "paddingRight": 15,
+      "paddingLeft": 16,
+      "paddingRight": 16,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -7771,10 +7793,7 @@ exports[`ButtonCore kind:secondary color:destructive size:small light:true hover
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "#ffffff",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#ffffff",
       "cursor": "pointer",
@@ -7783,9 +7802,13 @@ exports[`ButtonCore kind:secondary color:destructive size:small light:true hover
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#ffffff",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 15,
-      "paddingRight": 15,
+      "paddingLeft": 16,
+      "paddingRight": 16,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -7849,10 +7872,7 @@ exports[`ButtonCore kind:secondary color:destructive size:small light:true press
       "alignItems": "center",
       "background": "#9e271d",
       "border": "none",
-      "borderColor": "#f3bbb4",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 2,
       "boxSizing": "border-box",
       "color": "#f3bbb4",
       "cursor": "pointer",
@@ -7861,9 +7881,13 @@ exports[`ButtonCore kind:secondary color:destructive size:small light:true press
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#f3bbb4",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
-      "paddingLeft": 15,
-      "paddingRight": 15,
+      "paddingLeft": 16,
+      "paddingRight": 16,
       "paddingTop": 0,
       "position": "relative",
       "textDecoration": "none",
@@ -7922,18 +7946,13 @@ exports[`ButtonCore kind:secondary size:medium spinner:true 1`] = `
         "border": 0,
       },
       ":focus": {
-        "borderColor": "rgba(33,36,44,0.32)",
-        "borderWidth": 2,
-        "paddingLeft": 15,
-        "paddingRight": 15,
+        "outlineColor": "rgba(33,36,44,0.32)",
+        "outlineWidth": 2,
       },
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "rgba(33,36,44,0.32)",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 1,
       "boxSizing": "border-box",
       "color": "rgba(33,36,44,0.32)",
       "cursor": "default",
@@ -7942,6 +7961,10 @@ exports[`ButtonCore kind:secondary size:medium spinner:true 1`] = `
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "rgba(33,36,44,0.32)",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 1,
       "paddingBottom": 0,
       "paddingLeft": 16,
       "paddingRight": 16,
@@ -8058,18 +8081,13 @@ exports[`ButtonCore kind:secondary size:small spinner:true 1`] = `
         "border": 0,
       },
       ":focus": {
-        "borderColor": "rgba(33,36,44,0.32)",
-        "borderWidth": 2,
-        "paddingLeft": 15,
-        "paddingRight": 15,
+        "outlineColor": "rgba(33,36,44,0.32)",
+        "outlineWidth": 2,
       },
       "alignItems": "center",
       "background": "none",
       "border": "none",
-      "borderColor": "rgba(33,36,44,0.32)",
       "borderRadius": 4,
-      "borderStyle": "solid",
-      "borderWidth": 1,
       "boxSizing": "border-box",
       "color": "rgba(33,36,44,0.32)",
       "cursor": "default",
@@ -8078,6 +8096,10 @@ exports[`ButtonCore kind:secondary size:small spinner:true 1`] = `
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "rgba(33,36,44,0.32)",
+      "outlineOffset": 1,
+      "outlineStyle": "solid",
+      "outlineWidth": 1,
       "paddingBottom": 0,
       "paddingLeft": 16,
       "paddingRight": 16,
@@ -8269,16 +8291,6 @@ exports[`ButtonCore kind:tertiary color:default size:large light:false focused 1
       "::MozFocusInner": {
         "border": 0,
       },
-      ":after": {
-        "borderColor": "#1865f2",
-        "borderRadius": 4,
-        "borderStyle": "solid",
-        "borderWidth": 2,
-        "content": "''",
-        "height": "calc(100% - 4px)",
-        "position": "absolute",
-        "width": "calc(100% + 4px)",
-      },
       ":focus": {
         "WebkitTapHighlightColor": "rgba(0,0,0,0)",
       },
@@ -8294,6 +8306,9 @@ exports[`ButtonCore kind:tertiary color:default size:large light:false focused 1
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#1865f2",
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
       "paddingLeft": 0,
       "paddingRight": 0,
@@ -8598,16 +8613,6 @@ exports[`ButtonCore kind:tertiary color:default size:large light:true focused 1`
       "::MozFocusInner": {
         "border": 0,
       },
-      ":after": {
-        "borderColor": "#ffffff",
-        "borderRadius": 4,
-        "borderStyle": "solid",
-        "borderWidth": 2,
-        "content": "''",
-        "height": "calc(100% - 4px)",
-        "position": "absolute",
-        "width": "calc(100% + 4px)",
-      },
       ":focus": {
         "WebkitTapHighlightColor": "rgba(0,0,0,0)",
       },
@@ -8623,6 +8628,9 @@ exports[`ButtonCore kind:tertiary color:default size:large light:true focused 1`
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#ffffff",
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
       "paddingLeft": 0,
       "paddingRight": 0,
@@ -8927,16 +8935,6 @@ exports[`ButtonCore kind:tertiary color:default size:medium light:false focused
       "::MozFocusInner": {
         "border": 0,
       },
-      ":after": {
-        "borderColor": "#1865f2",
-        "borderRadius": 4,
-        "borderStyle": "solid",
-        "borderWidth": 2,
-        "content": "''",
-        "height": "calc(100% - 4px)",
-        "position": "absolute",
-        "width": "calc(100% + 4px)",
-      },
       ":focus": {
         "WebkitTapHighlightColor": "rgba(0,0,0,0)",
       },
@@ -8952,6 +8950,9 @@ exports[`ButtonCore kind:tertiary color:default size:medium light:false focused
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#1865f2",
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
       "paddingLeft": 0,
       "paddingRight": 0,
@@ -9256,16 +9257,6 @@ exports[`ButtonCore kind:tertiary color:default size:medium light:true focused 1
       "::MozFocusInner": {
         "border": 0,
       },
-      ":after": {
-        "borderColor": "#ffffff",
-        "borderRadius": 4,
-        "borderStyle": "solid",
-        "borderWidth": 2,
-        "content": "''",
-        "height": "calc(100% - 4px)",
-        "position": "absolute",
-        "width": "calc(100% + 4px)",
-      },
       ":focus": {
         "WebkitTapHighlightColor": "rgba(0,0,0,0)",
       },
@@ -9281,6 +9272,9 @@ exports[`ButtonCore kind:tertiary color:default size:medium light:true focused 1
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#ffffff",
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
       "paddingLeft": 0,
       "paddingRight": 0,
@@ -9585,16 +9579,6 @@ exports[`ButtonCore kind:tertiary color:default size:small light:false focused 1
       "::MozFocusInner": {
         "border": 0,
       },
-      ":after": {
-        "borderColor": "#1865f2",
-        "borderRadius": 4,
-        "borderStyle": "solid",
-        "borderWidth": 2,
-        "content": "''",
-        "height": "calc(100% - 4px)",
-        "position": "absolute",
-        "width": "calc(100% + 4px)",
-      },
       ":focus": {
         "WebkitTapHighlightColor": "rgba(0,0,0,0)",
       },
@@ -9610,6 +9594,9 @@ exports[`ButtonCore kind:tertiary color:default size:small light:false focused 1
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#1865f2",
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
       "paddingLeft": 0,
       "paddingRight": 0,
@@ -9914,16 +9901,6 @@ exports[`ButtonCore kind:tertiary color:default size:small light:true focused 1`
       "::MozFocusInner": {
         "border": 0,
       },
-      ":after": {
-        "borderColor": "#ffffff",
-        "borderRadius": 4,
-        "borderStyle": "solid",
-        "borderWidth": 2,
-        "content": "''",
-        "height": "calc(100% - 4px)",
-        "position": "absolute",
-        "width": "calc(100% + 4px)",
-      },
       ":focus": {
         "WebkitTapHighlightColor": "rgba(0,0,0,0)",
       },
@@ -9939,6 +9916,9 @@ exports[`ButtonCore kind:tertiary color:default size:small light:true focused 1`
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#ffffff",
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
       "paddingLeft": 0,
       "paddingRight": 0,
@@ -10243,16 +10223,6 @@ exports[`ButtonCore kind:tertiary color:destructive size:large light:false focus
       "::MozFocusInner": {
         "border": 0,
       },
-      ":after": {
-        "borderColor": "#d92916",
-        "borderRadius": 4,
-        "borderStyle": "solid",
-        "borderWidth": 2,
-        "content": "''",
-        "height": "calc(100% - 4px)",
-        "position": "absolute",
-        "width": "calc(100% + 4px)",
-      },
       ":focus": {
         "WebkitTapHighlightColor": "rgba(0,0,0,0)",
       },
@@ -10268,6 +10238,9 @@ exports[`ButtonCore kind:tertiary color:destructive size:large light:false focus
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#d92916",
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
       "paddingLeft": 0,
       "paddingRight": 0,
@@ -10572,16 +10545,6 @@ exports[`ButtonCore kind:tertiary color:destructive size:large light:true focuse
       "::MozFocusInner": {
         "border": 0,
       },
-      ":after": {
-        "borderColor": "#ffffff",
-        "borderRadius": 4,
-        "borderStyle": "solid",
-        "borderWidth": 2,
-        "content": "''",
-        "height": "calc(100% - 4px)",
-        "position": "absolute",
-        "width": "calc(100% + 4px)",
-      },
       ":focus": {
         "WebkitTapHighlightColor": "rgba(0,0,0,0)",
       },
@@ -10597,6 +10560,9 @@ exports[`ButtonCore kind:tertiary color:destructive size:large light:true focuse
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#ffffff",
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
       "paddingLeft": 0,
       "paddingRight": 0,
@@ -10901,16 +10867,6 @@ exports[`ButtonCore kind:tertiary color:destructive size:medium light:false focu
       "::MozFocusInner": {
         "border": 0,
       },
-      ":after": {
-        "borderColor": "#d92916",
-        "borderRadius": 4,
-        "borderStyle": "solid",
-        "borderWidth": 2,
-        "content": "''",
-        "height": "calc(100% - 4px)",
-        "position": "absolute",
-        "width": "calc(100% + 4px)",
-      },
       ":focus": {
         "WebkitTapHighlightColor": "rgba(0,0,0,0)",
       },
@@ -10926,6 +10882,9 @@ exports[`ButtonCore kind:tertiary color:destructive size:medium light:false focu
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#d92916",
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
       "paddingLeft": 0,
       "paddingRight": 0,
@@ -11230,16 +11189,6 @@ exports[`ButtonCore kind:tertiary color:destructive size:medium light:true focus
       "::MozFocusInner": {
         "border": 0,
       },
-      ":after": {
-        "borderColor": "#ffffff",
-        "borderRadius": 4,
-        "borderStyle": "solid",
-        "borderWidth": 2,
-        "content": "''",
-        "height": "calc(100% - 4px)",
-        "position": "absolute",
-        "width": "calc(100% + 4px)",
-      },
       ":focus": {
         "WebkitTapHighlightColor": "rgba(0,0,0,0)",
       },
@@ -11255,6 +11204,9 @@ exports[`ButtonCore kind:tertiary color:destructive size:medium light:true focus
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#ffffff",
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
       "paddingLeft": 0,
       "paddingRight": 0,
@@ -11559,16 +11511,6 @@ exports[`ButtonCore kind:tertiary color:destructive size:small light:false focus
       "::MozFocusInner": {
         "border": 0,
       },
-      ":after": {
-        "borderColor": "#d92916",
-        "borderRadius": 4,
-        "borderStyle": "solid",
-        "borderWidth": 2,
-        "content": "''",
-        "height": "calc(100% - 4px)",
-        "position": "absolute",
-        "width": "calc(100% + 4px)",
-      },
       ":focus": {
         "WebkitTapHighlightColor": "rgba(0,0,0,0)",
       },
@@ -11584,6 +11526,9 @@ exports[`ButtonCore kind:tertiary color:destructive size:small light:false focus
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#d92916",
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
       "paddingLeft": 0,
       "paddingRight": 0,
@@ -11888,16 +11833,6 @@ exports[`ButtonCore kind:tertiary color:destructive size:small light:true focuse
       "::MozFocusInner": {
         "border": 0,
       },
-      ":after": {
-        "borderColor": "#ffffff",
-        "borderRadius": 4,
-        "borderStyle": "solid",
-        "borderWidth": 2,
-        "content": "''",
-        "height": "calc(100% - 4px)",
-        "position": "absolute",
-        "width": "calc(100% + 4px)",
-      },
       ":focus": {
         "WebkitTapHighlightColor": "rgba(0,0,0,0)",
       },
@@ -11913,6 +11848,9 @@ exports[`ButtonCore kind:tertiary color:destructive size:small light:true focuse
       "justifyContent": "center",
       "margin": 0,
       "outline": "none",
+      "outlineColor": "#ffffff",
+      "outlineStyle": "solid",
+      "outlineWidth": 2,
       "paddingBottom": 0,
       "paddingLeft": 0,
       "paddingRight": 0,
diff --git a/packages/wonder-blocks-button/src/components/button-core.tsx b/packages/wonder-blocks-button/src/components/button-core.tsx
index 4158d80d9..5d883ce26 100644
--- a/packages/wonder-blocks-button/src/components/button-core.tsx
+++ b/packages/wonder-blocks-button/src/components/button-core.tsx
@@ -47,6 +47,7 @@ const ButtonCore: React.ForwardRefExoticComponent<
             hovered,
             href = undefined,
             kind = "primary",
+            labelStyle,
             light = false,
             pressed,
             size = "medium",
@@ -110,6 +111,7 @@ const ButtonCore: React.ForwardRefExoticComponent<
                 style={[
                     sharedStyles.text,
                     size === "large" && sharedStyles.largeText,
+                    labelStyle,
                     spinner && sharedStyles.hiddenText,
                     kind === "tertiary" && sharedStyles.textWithFocus,
                     // apply press/hover effects on the label
@@ -405,7 +407,6 @@ export const _generateStyles = (
             },
         };
     } else if (kind === "secondary") {
-        const horizontalPadding = padding - (theme.border.width.focused - 1);
         const secondaryBorderColor =
             buttonColor === "destructive"
                 ? theme.color.border.secondary.critical
@@ -421,11 +422,12 @@ export const _generateStyles = (
                     ? theme.color.bg.secondary.inverse
                     : theme.color.bg.secondary.default,
                 color: light ? theme.color.text.inverse : color,
-                borderColor: light
+                outlineColor: light
                     ? theme.color.border.secondary.inverse
                     : secondaryBorderColor,
-                borderStyle: "solid",
-                borderWidth: theme.border.width.secondary,
+                outlineStyle: "solid",
+                outlineWidth: theme.border.width.secondary,
+                outlineOffset: 1,
                 paddingLeft: padding,
                 paddingRight: padding,
             },
@@ -433,37 +435,29 @@ export const _generateStyles = (
                 background: light
                     ? theme.color.bg.secondary.inverse
                     : theme.color.bg.secondary.focus,
-                borderColor: light ? theme.color.border.primary.inverse : color,
-                borderWidth: theme.border.width.focused,
-                paddingLeft: horizontalPadding,
-                paddingRight: horizontalPadding,
+                outlineColor: light
+                    ? theme.color.border.primary.inverse
+                    : color,
+                outlineWidth: theme.border.width.focused,
             },
 
             active: {
                 background: light ? activeColor : secondaryActiveColor,
                 color: light ? fadedColor : activeColor,
-                borderColor: light ? fadedColor : activeColor,
-                borderWidth: theme.border.width.focused,
-                // We need to reduce padding to offset the difference
-                // caused by the border becoming thicker on focus.
-                paddingLeft: horizontalPadding,
-                paddingRight: horizontalPadding,
+                outlineColor: light ? fadedColor : activeColor,
+                outlineWidth: theme.border.width.focused,
             },
             disabled: {
                 color: light
                     ? theme.color.text.secondary.inverse
                     : theme.color.text.disabled,
-                borderColor: light ? fadedColor : theme.color.border.disabled,
+                outlineColor: light ? fadedColor : theme.color.border.disabled,
                 cursor: "default",
                 ":focus": {
-                    borderColor: light
+                    outlineColor: light
                         ? theme.color.border.secondary.inverse
                         : theme.color.border.disabled,
-                    borderWidth: theme.border.width.disabled,
-                    // We need to reduce padding to offset the difference
-                    // caused by the border becoming thicker on focus.
-                    paddingLeft: padding - 1,
-                    paddingRight: padding - 1,
+                    outlineWidth: theme.border.width.disabled,
                 },
             },
         };
@@ -488,25 +482,12 @@ export const _generateStyles = (
                 },
             },
             focus: {
-                ":after": {
-                    content: "''",
-                    // Since we are using a pseudo element, we need to manually
-                    // calculate the width/height and use absolute position to
-                    // prevent other elements from being shifted around.
-                    position: "absolute",
-                    // Keeps the button at the same size when applying the
-                    // borderWidth property, so we can apply the correct value
-                    // per theme for each side (left and right).
-                    width: `calc(100% + ${theme.border.width.focused * 2}px)`,
-                    // Same as above, but for the height (top and bottom).
-                    height: `calc(100% - ${theme.border.width.focused * 2}px)`,
-                    borderStyle: "solid",
-                    borderColor: light
-                        ? theme.color.border.tertiary.inverse
-                        : color,
-                    borderWidth: theme.border.width.focused,
-                    borderRadius: theme.border.radius.default,
-                },
+                outlineStyle: "solid",
+                outlineColor: light
+                    ? theme.color.border.tertiary.inverse
+                    : color,
+                outlineWidth: theme.border.width.focused,
+                borderRadius: theme.border.radius.default,
             },
             active: {
                 color: light ? fadedColor : activeColor,
@@ -520,11 +501,9 @@ export const _generateStyles = (
                 cursor: "default",
             },
             disabledFocus: {
-                ":after": {
-                    borderColor: light
-                        ? theme.color.border.tertiary.inverse
-                        : theme.color.border.disabled,
-                },
+                outlineColor: light
+                    ? theme.color.border.tertiary.inverse
+                    : theme.color.border.disabled,
             },
         };
     } else {
diff --git a/packages/wonder-blocks-button/src/components/button.tsx b/packages/wonder-blocks-button/src/components/button.tsx
index 479a4ea83..d7dd6bff4 100644
--- a/packages/wonder-blocks-button/src/components/button.tsx
+++ b/packages/wonder-blocks-button/src/components/button.tsx
@@ -110,6 +110,10 @@ export type SharedProps =
          * page reload.
          */
         skipClientNav?: boolean;
+        /**
+         * Optional custom styles for the inner label.
+         */
+        labelStyle?: StyleType;
         /**
          * Optional custom styles.
          */