diff --git a/docs/components/example/index.json b/docs/components/example/index.json
index 06fd81bd7..6ecf2cccb 100644
--- a/docs/components/example/index.json
+++ b/docs/components/example/index.json
@@ -18,7 +18,7 @@
   "actionable-inline-banner-informative-weak": "import { ActionableInlineBanner } from \"seed-design/ui/actionable-inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function ActionableInlineBannerInformativeWeak() {\n  return (\n    <ActionableInlineBanner\n      onClick={() => window.alert(\"Hello World\")}\n      variant=\"informativeWeak\"\n      icon={<IconExclamationmarkCircleFill />}\n    >\n      사업자 정보를 등록해주세요.\n    </ActionableInlineBanner>\n  );\n}",
   "actionable-inline-banner-neutral-weak": "import { ActionableInlineBanner } from \"seed-design/ui/actionable-inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function ActionableInlineBannerNeutralWeak() {\n  return (\n    <ActionableInlineBanner\n      onClick={() => window.alert(\"Hello World\")}\n      variant=\"neutralWeak\"\n      icon={<IconExclamationmarkCircleFill />}\n    >\n      사업자 정보를 등록해주세요.\n    </ActionableInlineBanner>\n  );\n}",
   "actionable-inline-banner-positive-weak": "import { ActionableInlineBanner } from \"seed-design/ui/actionable-inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function ActionableInlineBannerPositiveWeak() {\n  return (\n    <ActionableInlineBanner\n      onClick={() => window.alert(\"Hello World\")}\n      variant=\"positiveWeak\"\n      icon={<IconExclamationmarkCircleFill />}\n    >\n      사업자 정보를 등록해주세요.\n    </ActionableInlineBanner>\n  );\n}",
-  "actionable-inline-banner-preview": "import { ActionableInlineBanner } from \"seed-design/ui/actionable-inline-banner\";\n\nexport default function ActionableInlineBannerPreview() {\n  const onClick = () => window.alert(\"Hello World\");\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <ActionableInlineBanner onClick={onClick}>ullamco</ActionableInlineBanner>\n      <ActionableInlineBanner onClick={onClick}>\n        Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet.\n      </ActionableInlineBanner>\n    </div>\n  );\n}",
+  "actionable-inline-banner-preview": "import { ActionableInlineBanner } from \"seed-design/ui/actionable-inline-banner\";\n\nexport default function ActionableInlineBannerPreview() {\n  const onClick = () => window.alert(\"Hello World\");\n\n  return (\n    <div className=\"flex flex-col gap-3 w-full\">\n      <ActionableInlineBanner onClick={onClick}>ullamco</ActionableInlineBanner>\n      <ActionableInlineBanner onClick={onClick}>\n        Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet.\n      </ActionableInlineBanner>\n    </div>\n  );\n}",
   "actionable-inline-banner-text-only": "import { ActionableInlineBanner } from \"seed-design/ui/actionable-inline-banner\";\n\nexport default function ActionableInlineBannerTextOnly() {\n  return (\n    <ActionableInlineBanner variant=\"informativeWeak\" onClick={() => window.alert(\"Hello World\")}>\n      다른 사람과 예약된 물품이 있어요.\n    </ActionableInlineBanner>\n  );\n}",
   "actionable-inline-banner-warning-solid": "import { ActionableInlineBanner } from \"seed-design/ui/actionable-inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function ActionableInlineBannerWarningSolid() {\n  return (\n    <ActionableInlineBanner\n      onClick={() => window.alert(\"Hello World\")}\n      variant=\"warningSolid\"\n      icon={<IconExclamationmarkCircleFill />}\n    >\n      사업자 정보를 등록해주세요.\n    </ActionableInlineBanner>\n  );\n}",
   "actionable-inline-banner-warning-weak": "import { ActionableInlineBanner } from \"seed-design/ui/actionable-inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function ActionableInlineBannerWarningWeak() {\n  return (\n    <ActionableInlineBanner\n      onClick={() => window.alert(\"Hello World\")}\n      variant=\"warningWeak\"\n      icon={<IconExclamationmarkCircleFill />}\n    >\n      사업자 정보를 등록해주세요.\n    </ActionableInlineBanner>\n  );\n}",
@@ -52,7 +52,7 @@
   "dismissible-inline-banner-informative-weak": "import { DismissibleInlineBanner } from \"seed-design/ui/dismissible-inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function DismissibleInlineBannerInformativeWeak() {\n  return (\n    <DismissibleInlineBanner\n      dismissAriaLabel=\"닫기\"\n      variant=\"informativeWeak\"\n      icon={<IconExclamationmarkCircleFill />}\n    >\n      사업자 정보를 등록해주세요.\n    </DismissibleInlineBanner>\n  );\n}",
   "dismissible-inline-banner-neutral-weak": "import { DismissibleInlineBanner } from \"seed-design/ui/dismissible-inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function DismissibleInlineBannerNeutralWeak() {\n  return (\n    <DismissibleInlineBanner\n      dismissAriaLabel=\"닫기\"\n      variant=\"neutralWeak\"\n      icon={<IconExclamationmarkCircleFill />}\n    >\n      사업자 정보를 등록해주세요.\n    </DismissibleInlineBanner>\n  );\n}",
   "dismissible-inline-banner-positive-weak": "import { DismissibleInlineBanner } from \"seed-design/ui/dismissible-inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function DismissibleInlineBannerPositiveWeak() {\n  return (\n    <DismissibleInlineBanner\n      dismissAriaLabel=\"닫기\"\n      variant=\"positiveWeak\"\n      icon={<IconExclamationmarkCircleFill />}\n    >\n      사업자 정보를 등록해주세요.\n    </DismissibleInlineBanner>\n  );\n}",
-  "dismissible-inline-banner-preview": "import { DismissibleInlineBanner } from \"seed-design/ui/dismissible-inline-banner\";\n\nexport default function DismissibleInlineBannerPreview() {\n  const onDismiss = () => window.alert(\"닫기 버튼 클릭\");\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <DismissibleInlineBanner dismissAriaLabel=\"닫기\" onDismiss={onDismiss}>\n        ullamco\n      </DismissibleInlineBanner>\n      <DismissibleInlineBanner dismissAriaLabel=\"닫기\" onDismiss={onDismiss}>\n        Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet.\n      </DismissibleInlineBanner>\n    </div>\n  );\n}",
+  "dismissible-inline-banner-preview": "import { DismissibleInlineBanner } from \"seed-design/ui/dismissible-inline-banner\";\n\nexport default function DismissibleInlineBannerPreview() {\n  const onDismiss = () => window.alert(\"닫기 버튼 클릭\");\n\n  return (\n    <div className=\"flex flex-col gap-3 w-full\">\n      <DismissibleInlineBanner dismissAriaLabel=\"닫기\" onDismiss={onDismiss}>\n        ullamco\n      </DismissibleInlineBanner>\n      <DismissibleInlineBanner dismissAriaLabel=\"닫기\" onDismiss={onDismiss}>\n        Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet.\n      </DismissibleInlineBanner>\n    </div>\n  );\n}",
   "dismissible-inline-banner-text-only": "import { DismissibleInlineBanner } from \"seed-design/ui/dismissible-inline-banner\";\n\nexport default function DismissibleInlineBannerTextOnly() {\n  return (\n    <DismissibleInlineBanner dismissAriaLabel=\"닫기\" variant=\"informativeWeak\">\n      다른 사람과 예약된 물품이 있어요.\n    </DismissibleInlineBanner>\n  );\n}",
   "dismissible-inline-banner-warning-solid": "import { DismissibleInlineBanner } from \"seed-design/ui/dismissible-inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function DismissibleInlineBannerWarningSolid() {\n  return (\n    <DismissibleInlineBanner\n      dismissAriaLabel=\"닫기\"\n      variant=\"warningSolid\"\n      icon={<IconExclamationmarkCircleFill />}\n    >\n      사업자 정보를 등록해주세요.\n    </DismissibleInlineBanner>\n  );\n}",
   "dismissible-inline-banner-warning-weak": "import { DismissibleInlineBanner } from \"seed-design/ui/dismissible-inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function DismissibleInlineBannerWarningWeak() {\n  return (\n    <DismissibleInlineBanner\n      dismissAriaLabel=\"닫기\"\n      variant=\"warningWeak\"\n      icon={<IconExclamationmarkCircleFill />}\n    >\n      사업자 정보를 등록해주세요.\n    </DismissibleInlineBanner>\n  );\n}",
@@ -65,7 +65,7 @@
   "inline-banner-informative-weak": "import { InlineBanner } from \"seed-design/ui/inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function InlineBannerInformativeWeak() {\n  return (\n    <InlineBanner variant=\"informativeWeak\" icon={<IconExclamationmarkCircleFill />}>\n      사업자 정보를 등록해주세요.\n    </InlineBanner>\n  );\n}",
   "inline-banner-neutral-weak": "import { InlineBanner } from \"seed-design/ui/inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function InlineBannerNeutralWeak() {\n  return (\n    <InlineBanner variant=\"neutralWeak\" icon={<IconExclamationmarkCircleFill />}>\n      사업자 정보를 등록해주세요.\n    </InlineBanner>\n  );\n}",
   "inline-banner-positive-weak": "import { InlineBanner } from \"seed-design/ui/inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function InlineBannerPositiveWeak() {\n  return (\n    <InlineBanner variant=\"positiveWeak\" icon={<IconExclamationmarkCircleFill />}>\n      사업자 정보를 등록해주세요.\n    </InlineBanner>\n  );\n}",
-  "inline-banner-preview": "import { InlineBanner } from \"seed-design/ui/inline-banner\";\n\nexport default function InlineBannerPreview() {\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <InlineBanner>ullamco</InlineBanner>\n      <InlineBanner>\n        Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet.\n      </InlineBanner>\n    </div>\n  );\n}",
+  "inline-banner-preview": "import { InlineBanner } from \"seed-design/ui/inline-banner\";\n\nexport default function InlineBannerPreview() {\n  return (\n    <div className=\"flex flex-col gap-3 w-full\">\n      <InlineBanner>ullamco</InlineBanner>\n      <InlineBanner>\n        Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet.\n      </InlineBanner>\n    </div>\n  );\n}",
   "inline-banner-text-only": "import { InlineBanner } from \"seed-design/ui/inline-banner\";\n\nexport default function InlineBannerTextOnly() {\n  return <InlineBanner variant=\"informativeWeak\">다른 사람과 예약된 물품이 있어요.</InlineBanner>;\n}",
   "inline-banner-warning-solid": "import { InlineBanner } from \"seed-design/ui/inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function InlineBannerWarningSolid() {\n  return (\n    <InlineBanner variant=\"warningSolid\" icon={<IconExclamationmarkCircleFill />}>\n      사업자 정보를 등록해주세요.\n    </InlineBanner>\n  );\n}",
   "inline-banner-warning-weak": "import { InlineBanner } from \"seed-design/ui/inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function InlineBannerWarningWeak() {\n  return (\n    <InlineBanner variant=\"warningWeak\" icon={<IconExclamationmarkCircleFill />}>\n      사업자 정보를 등록해주세요.\n    </InlineBanner>\n  );\n}",
@@ -78,7 +78,7 @@
   "link-inline-banner-informative-weak": "import { LinkInlineBanner } from \"seed-design/ui/link-inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function LinkInlineBannerInformativeWeak() {\n  return (\n    <LinkInlineBanner\n      linkLabel=\"자세히 보기\"\n      onLinkLabelClick={() => window.alert(\"Hello World\")}\n      variant=\"informativeWeak\"\n      icon={<IconExclamationmarkCircleFill />}\n    >\n      사업자 정보를 등록해주세요.\n    </LinkInlineBanner>\n  );\n}",
   "link-inline-banner-neutral-weak": "import { LinkInlineBanner } from \"seed-design/ui/link-inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function LinkInlineBannerNeutralWeak() {\n  return (\n    <LinkInlineBanner\n      linkLabel=\"자세히 보기\"\n      onLinkLabelClick={() => window.alert(\"Hello World\")}\n      variant=\"neutralWeak\"\n      icon={<IconExclamationmarkCircleFill />}\n    >\n      사업자 정보를 등록해주세요.\n    </LinkInlineBanner>\n  );\n}",
   "link-inline-banner-positive-weak": "import { LinkInlineBanner } from \"seed-design/ui/link-inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function LinkInlineBannerPositiveWeak() {\n  return (\n    <LinkInlineBanner\n      linkLabel=\"자세히 보기\"\n      onLinkLabelClick={() => window.alert(\"Hello World\")}\n      variant=\"positiveWeak\"\n      icon={<IconExclamationmarkCircleFill />}\n    >\n      사업자 정보를 등록해주세요.\n    </LinkInlineBanner>\n  );\n}",
-  "link-inline-banner-preview": "import { LinkInlineBanner } from \"seed-design/ui/link-inline-banner\";\n\nexport default function LinkInlineBannerPreview() {\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <LinkInlineBanner linkLabel=\"Details\" onLinkLabelClick={() => window.alert(\"Hello World\")}>\n        ullamco\n      </LinkInlineBanner>\n      <LinkInlineBanner\n        linkLabel=\"자세히 보기\"\n        onLinkLabelClick={() => window.alert(\"Hello World\")}\n      >\n        Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet.\n      </LinkInlineBanner>\n    </div>\n  );\n}",
+  "link-inline-banner-preview": "import { LinkInlineBanner } from \"seed-design/ui/link-inline-banner\";\n\nexport default function LinkInlineBannerPreview() {\n  return (\n    <div className=\"flex flex-col gap-3 w-full\">\n      <LinkInlineBanner linkLabel=\"Details\" onLinkLabelClick={() => window.alert(\"Hello World\")}>\n        ullamco\n      </LinkInlineBanner>\n      <LinkInlineBanner\n        linkLabel=\"자세히 보기\"\n        onLinkLabelClick={() => window.alert(\"Hello World\")}\n      >\n        Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet.\n      </LinkInlineBanner>\n    </div>\n  );\n}",
   "link-inline-banner-text-only": "import { LinkInlineBanner } from \"seed-design/ui/link-inline-banner\";\n\nexport default function LinkInlineBannerTextOnly() {\n  return (\n    <LinkInlineBanner\n      linkLabel=\"자세히 보기\"\n      onLinkLabelClick={() => window.alert(\"Hello World\")}\n      variant=\"informativeWeak\"\n    >\n      다른 사람과 예약된 물품이 있어요.\n    </LinkInlineBanner>\n  );\n}",
   "link-inline-banner-warning-solid": "import { LinkInlineBanner } from \"seed-design/ui/link-inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function LinkInlineBannerWarningSolid() {\n  return (\n    <LinkInlineBanner\n      linkLabel=\"자세히 보기\"\n      onLinkLabelClick={() => window.alert(\"Hello World\")}\n      variant=\"warningSolid\"\n      icon={<IconExclamationmarkCircleFill />}\n    >\n      사업자 정보를 등록해주세요.\n    </LinkInlineBanner>\n  );\n}",
   "link-inline-banner-warning-weak": "import { LinkInlineBanner } from \"seed-design/ui/link-inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function LinkInlineBannerWarningWeak() {\n  return (\n    <LinkInlineBanner\n      linkLabel=\"자세히 보기\"\n      onLinkLabelClick={() => window.alert(\"Hello World\")}\n      variant=\"warningWeak\"\n      icon={<IconExclamationmarkCircleFill />}\n    >\n      사업자 정보를 등록해주세요.\n    </LinkInlineBanner>\n  );\n}",
diff --git a/docs/stories/ActionableInlineBanner.stories.tsx b/docs/stories/ActionableInlineBanner.stories.tsx
new file mode 100644
index 000000000..36181346e
--- /dev/null
+++ b/docs/stories/ActionableInlineBanner.stories.tsx
@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ActionableInlineBanner } from "seed-design/ui/actionable-inline-banner";
+
+import { inlineBannerVariantMap } from "@seed-design/recipe/inlineBanner";
+import { VariantTable } from "./components/variant-table";
+import { IconBellLine } from "@daangn/react-monochrome-icon";
+import { SeedThemeDecorator } from "./components/decorator";
+
+const meta = {
+  component: ActionableInlineBanner,
+  decorators: [SeedThemeDecorator],
+} satisfies Meta<typeof ActionableInlineBanner>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const CommonStoryTemplate: Story = {
+  args: {
+    children:
+      "Ex do aliqua est non ea adipisicing nostrud. Exercitation ea mollit sunt magna quis quis exercitation.",
+    icon: <IconBellLine />,
+    onClick: () => {},
+  },
+  render: (args) => (
+    <VariantTable Component={meta.component} variantMap={inlineBannerVariantMap} {...args} />
+  ),
+};
+
+export const LightTheme: Story = CommonStoryTemplate;
+
+export const DarkTheme: Story = CommonStoryTemplate;
+
+export const FontScalingExtraSmall: Story = CommonStoryTemplate;
+
+export const FontScalingExtraExtraExtraLarge: Story = CommonStoryTemplate;
diff --git a/docs/stories/DismissibleInlineBanner.stories.tsx b/docs/stories/DismissibleInlineBanner.stories.tsx
new file mode 100644
index 000000000..0a6bd2267
--- /dev/null
+++ b/docs/stories/DismissibleInlineBanner.stories.tsx
@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { DismissibleInlineBanner } from "seed-design/ui/dismissible-inline-banner";
+
+import { inlineBannerVariantMap } from "@seed-design/recipe/inlineBanner";
+import { VariantTable } from "./components/variant-table";
+import { IconBellLine } from "@daangn/react-monochrome-icon";
+import { SeedThemeDecorator } from "./components/decorator";
+
+const meta = {
+  component: DismissibleInlineBanner,
+  decorators: [SeedThemeDecorator],
+} satisfies Meta<typeof DismissibleInlineBanner>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const CommonStoryTemplate: Story = {
+  args: {
+    children:
+      "Ex do aliqua est non ea adipisicing nostrud. Exercitation ea mollit sunt magna quis quis exercitation.",
+    icon: <IconBellLine />,
+    dismissAriaLabel: "닫기",
+  },
+  render: (args) => (
+    <VariantTable Component={meta.component} variantMap={inlineBannerVariantMap} {...args} />
+  ),
+};
+
+export const LightTheme: Story = CommonStoryTemplate;
+
+export const DarkTheme: Story = CommonStoryTemplate;
+
+export const FontScalingExtraSmall: Story = CommonStoryTemplate;
+
+export const FontScalingExtraExtraExtraLarge: Story = CommonStoryTemplate;
diff --git a/docs/stories/InlineBanner.stories.tsx b/docs/stories/InlineBanner.stories.tsx
index 43ffbf253..d57fdfe5f 100644
--- a/docs/stories/InlineBanner.stories.tsx
+++ b/docs/stories/InlineBanner.stories.tsx
@@ -16,9 +16,10 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const LightTheme: Story = {
+const CommonStoryTemplate: Story = {
   args: {
-    children: "This is a title",
+    children:
+      "Ex do aliqua est non ea adipisicing nostrud. Exercitation ea mollit sunt magna quis quis exercitation.",
     icon: <IconBellLine />,
   },
   render: (args) => (
@@ -26,32 +27,10 @@ export const LightTheme: Story = {
   ),
 };
 
-export const DarkTheme: Story = {
-  args: {
-    children: "This is a title",
-    icon: <IconBellLine />,
-  },
-  render: (args) => (
-    <VariantTable Component={meta.component} variantMap={inlineBannerVariantMap} {...args} />
-  ),
-};
+export const LightTheme: Story = CommonStoryTemplate;
 
-export const FontScalingExtraSmall: Story = {
-  args: {
-    children: "This is a title",
-    icon: <IconBellLine />,
-  },
-  render: (args) => (
-    <VariantTable Component={meta.component} variantMap={inlineBannerVariantMap} {...args} />
-  ),
-};
+export const DarkTheme: Story = CommonStoryTemplate;
 
-export const FontScalingExtraExtraExtraLarge: Story = {
-  args: {
-    children: "This is a title",
-    icon: <IconBellLine />,
-  },
-  render: (args) => (
-    <VariantTable Component={meta.component} variantMap={inlineBannerVariantMap} {...args} />
-  ),
-};
+export const FontScalingExtraSmall: Story = CommonStoryTemplate;
+
+export const FontScalingExtraExtraExtraLarge: Story = CommonStoryTemplate;
diff --git a/docs/stories/LinkInlineBanner.stories.tsx b/docs/stories/LinkInlineBanner.stories.tsx
new file mode 100644
index 000000000..07c44512c
--- /dev/null
+++ b/docs/stories/LinkInlineBanner.stories.tsx
@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { LinkInlineBanner } from "seed-design/ui/link-inline-banner";
+
+import { inlineBannerVariantMap } from "@seed-design/recipe/inlineBanner";
+import { VariantTable } from "./components/variant-table";
+import { IconBellLine } from "@daangn/react-monochrome-icon";
+import { SeedThemeDecorator } from "./components/decorator";
+
+const meta = {
+  component: LinkInlineBanner,
+  decorators: [SeedThemeDecorator],
+} satisfies Meta<typeof LinkInlineBanner>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const CommonStoryTemplate: Story = {
+  args: {
+    children:
+      "Ex do aliqua est non ea adipisicing nostrud. Exercitation ea mollit sunt magna quis quis exercitation.",
+    icon: <IconBellLine />,
+    linkLabel: "자세히 보기",
+    onLinkLabelClick: () => {},
+  },
+  render: (args) => (
+    <VariantTable Component={meta.component} variantMap={inlineBannerVariantMap} {...args} />
+  ),
+};
+
+export const LightTheme: Story = CommonStoryTemplate;
+
+export const DarkTheme: Story = CommonStoryTemplate;
+
+export const FontScalingExtraSmall: Story = CommonStoryTemplate;
+
+export const FontScalingExtraExtraExtraLarge: Story = CommonStoryTemplate;
diff --git a/packages/recipe-generator/preset/src/inline-banner.recipe.ts b/packages/recipe-generator/preset/src/inline-banner.recipe.ts
index da9785590..05cb7b8bf 100644
--- a/packages/recipe-generator/preset/src/inline-banner.recipe.ts
+++ b/packages/recipe-generator/preset/src/inline-banner.recipe.ts
@@ -71,18 +71,30 @@ const inlineBanner = defineRecipe({
       textDecoration: "underline",
       // XXX
       textUnderlineOffset: "2px",
+
+      // XXX: 추후 reset.css 추가되면 쳐내질 가능성
+      border: "none",
+      backgroundColor: "transparent",
+      paddingBlock: 0,
     },
     dismissButton: {
       flex: "none",
 
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+
       width: vars.base.enabled.dismissButton.size,
       height: vars.base.enabled.dismissButton.size,
+
+      // XXX: 추후 reset.css 추가되면 쳐내질 가능성
+      border: "none",
+      backgroundColor: "transparent",
+      padding: 0,
     },
     xIcon: {
       width: vars.base.enabled.xIcon.size,
       height: vars.base.enabled.xIcon.size,
-
-      margin: "auto",
     },
     chevronRightIcon: {
       flex: "none",
@@ -116,6 +128,12 @@ const inlineBanner = defineRecipe({
       actionable: {
         root: {
           paddingInlineEnd: vars.typeActionable.enabled.root.paddingXEnd,
+
+          // XXX: 추후 reset.css 추가되면 쳐내질 가능성
+          // https://daangn.slack.com/archives/C07FGUB49B5/p1729739060343499
+          border: "none",
+          paddingBlock: 0,
+          font: "inherit",
         },
       },
     },
diff --git a/packages/stylesheet/inlineBanner.css b/packages/stylesheet/inlineBanner.css
index 5051f37d8..e626497bb 100644
--- a/packages/stylesheet/inlineBanner.css
+++ b/packages/stylesheet/inlineBanner.css
@@ -40,17 +40,25 @@
     font-weight: var(--seed-v3-font-weight-regular);
     line-height: 1rem;
     text-decoration: underline;
-    text-underline-offset: 2px
+    text-underline-offset: 2px;
+    border: none;
+    background-color: transparent;
+    padding-block: 0
 }
 .inlineBanner__dismissButton {
     flex: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     width: var(--seed-v3-unit-10);
-    height: var(--seed-v3-unit-10)
+    height: var(--seed-v3-unit-10);
+    border: none;
+    background-color: transparent;
+    padding: 0
 }
 .inlineBanner__xIcon {
     width: var(--seed-v3-unit-4);
-    height: var(--seed-v3-unit-4);
-    margin: auto
+    height: var(--seed-v3-unit-4)
 }
 .inlineBanner__chevronRightIcon {
     flex: none;
@@ -68,7 +76,10 @@
     padding-inline-end: var(--seed-v3-unit-1)
 }
 .inlineBanner__root--type_actionable {
-    padding-inline-end: var(--seed-v3-unit-1)
+    padding-inline-end: var(--seed-v3-unit-1);
+    border: none;
+    padding-block: 0;
+    font: inherit
 }
 .inlineBanner__root--variant_neutralWeak {
     background-color: var(--seed-v3-color-bg-neutral-weak)