diff --git a/.changeset/cuddly-oranges-rhyme.md b/.changeset/cuddly-oranges-rhyme.md
new file mode 100644
index 00000000..b6bf27f6
--- /dev/null
+++ b/.changeset/cuddly-oranges-rhyme.md
@@ -0,0 +1,5 @@
+---
+"@4design/for-ui": patch
+---
+
+feat(Callout): 追加
diff --git a/packages/for-ui/src/callout/Callout.stories.tsx b/packages/for-ui/src/callout/Callout.stories.tsx
new file mode 100644
index 00000000..53aea23f
--- /dev/null
+++ b/packages/for-ui/src/callout/Callout.stories.tsx
@@ -0,0 +1,59 @@
+import { MdErrorOutline } from 'react-icons/md';
+import { Meta } from '@storybook/react/types-6-0';
+import { Text } from '../text';
+import { Callout } from './Callout';
+
+const sampleIcons = {
+ undefined,
+ MdErrorOutline: ,
+};
+
+export default {
+ title: 'Feedback / Callout',
+ component: Callout,
+ argTypes: {
+ intention: ['subtle', 'positive', 'negative', 'notice', 'informative'],
+ icon: {
+ options: Object.keys(sampleIcons),
+ mapping: sampleIcons,
+ },
+ },
+} as Meta;
+
+export const Playground = {
+ args: {
+ children: 'テキスト',
+ icon: 'MdErrorOutline',
+ },
+};
+
+export const Default = () => (
+
+
+ アイコンなし
+
+ 自動診断がオフになっています。
+ 自動診断がオフになっています。
+ 自動診断がオフになっています。
+ 自動診断がオフになっています。
+ 自動診断がオフになっています。
+
+ アイコン付き
+
+ } intention="subtle">
+ 自動診断がオフになっています。
+
+ } intention="positive">
+ 自動診断がオフになっています。
+
+ } intention="negative">
+ 自動診断がオフになっています。
+
+ } intention="notice">
+ 自動診断がオフになっています。
+
+ } intention="informative">
+ 自動診断がオフになっています。
+
+
+);
diff --git a/packages/for-ui/src/callout/Callout.test.tsx b/packages/for-ui/src/callout/Callout.test.tsx
new file mode 100644
index 00000000..eeff8134
--- /dev/null
+++ b/packages/for-ui/src/callout/Callout.test.tsx
@@ -0,0 +1,13 @@
+import { render, screen } from '@testing-library/react';
+import { Callout } from './Callout';
+
+describe('Callout', () => {
+ it('is rendered', () => {
+ render(Hello);
+ expect(screen.queryByRole('status', { description: 'Hello' })).toBeInTheDocument();
+ });
+ it('of negative intention is rendered', () => {
+ render(Hello);
+ expect(screen.queryByRole('alert', { description: 'Hello' })).toBeInTheDocument();
+ });
+});
diff --git a/packages/for-ui/src/callout/Callout.tsx b/packages/for-ui/src/callout/Callout.tsx
new file mode 100644
index 00000000..7aaeb6f9
--- /dev/null
+++ b/packages/for-ui/src/callout/Callout.tsx
@@ -0,0 +1,61 @@
+import { FC, ReactNode, useId } from 'react';
+import { fsx } from '../system/fsx';
+import { Text } from '../text';
+
+export type CalloutProps = {
+ /**
+ * 操作の意図を示す場合に指定
+ *
+ * 例: 通常、コンテンツの削除など取り返しのつかないユーザーの操作を赤色で表示しますが、その場合intentionにnegativeを設定してください。
+ *
+ * @default subtle
+ */
+ intention?: 'subtle' | 'positive' | 'negative' | 'notice' | 'informative';
+
+ /**
+ * iconを表示する場合に設定
+ *
+ * 色や大きさはCallout側から設定するので指定しないでください。例: `icon={}`
+ */
+ icon?: ReactNode;
+
+ /**
+ * 表示させるテキストを指定
+ *
+ * リンク等を入れられるようReactNodeにしてありますが、通常はstringを指定してください。Button等は含めないでください。
+ */
+ children: ReactNode;
+};
+
+export const Callout: FC = ({ icon, children, intention = 'subtle', ...props }) => {
+ const descriptionId = useId();
+ return (
+
+ {icon && (
+
+ {icon}
+
+ )}
+
+ {children}
+
+
+ );
+};
diff --git a/packages/for-ui/src/callout/index.ts b/packages/for-ui/src/callout/index.ts
new file mode 100644
index 00000000..4ca74e4b
--- /dev/null
+++ b/packages/for-ui/src/callout/index.ts
@@ -0,0 +1 @@
+export * from './Callout';
diff --git a/packages/for-ui/src/index.ts b/packages/for-ui/src/index.ts
index dd58f690..bb36427b 100644
--- a/packages/for-ui/src/index.ts
+++ b/packages/for-ui/src/index.ts
@@ -1,5 +1,6 @@
export * from './badge';
export * from './button';
+export * from './callout';
export * from './checkbox';
export * from './chip';
export * from './drawer';