diff --git a/packages/callout/_mixins.scss b/packages/callout/_mixins.scss
index 385e8df..4464d90 100644
--- a/packages/callout/_mixins.scss
+++ b/packages/callout/_mixins.scss
@@ -35,6 +35,10 @@
     margin-block-end: 0;
   }
 
+  ._trailing {
+    margin-left: auto;
+  }
+
   @include -state-style(map.get($options, color));
   @include -size-style(map.get($options, size));
 
diff --git a/packages/stories-web/src/components/Callout.tsx b/packages/stories-web/src/components/Callout.tsx
index 626d8b6..f4ee3c4 100644
--- a/packages/stories-web/src/components/Callout.tsx
+++ b/packages/stories-web/src/components/Callout.tsx
@@ -8,6 +8,7 @@ export interface Props {
     "informative" | "positive" | "negative" | "notice"
   >;
   size?: Extract<Size, 's' | 'm' | 'l'>;
+  hasButton?: boolean;
 }
 
 const Callout: FC<Props> = (props: Props) => {
@@ -15,6 +16,7 @@ const Callout: FC<Props> = (props: Props) => {
   const {
     color = "informative",
     size = "m",
+    hasButton = false,
     children
   } = props
 
@@ -27,6 +29,13 @@ const Callout: FC<Props> = (props: Props) => {
       <div className="_body">
         { children }
       </div>
+      { hasButton && (
+        <div className="_trailing">
+          <button className="in-button -size-s -appearance-transparent">
+            <div className="_body">閉じる</div>
+          </button>
+        </div>
+      )}
     </div>
   )
 }