Repository: elastic/eui
Pull request #8513: feat(docusaurus-theme): use `EuiCallOut` for admonition
Author: login: acstll
Labels: name: skip-changelog
description: Use on PRs to skip changelog requirement (Don't delete - used for automation)
Created: 2025-03-28T07:44:50Z | Merged: 2025-03-31T17:07:26Z

## Summary

Resolves https://github.com/elastic/eui-private/issues/269

With this PR, MDX admonitions defined using the ::: syntax will render with `EuiCallOut`.

### Screenshot

![Screenshot 2025-03-28 at 08 50 30](https://github.com/user-attachments/assets/c65e1154-8545-45f7-b47d-cb3f0b466dc3)

```mdx
:::note This a note
Some **content** with _Markdown_ `syntax`. Check [this api.](https://docusaurus.io/docs/markdown-features/admonitions)
:::

:::tip This is a tip
Some **content** with _Markdown_ `syntax`. Check [this api.](https://docusaurus.io/docs/markdown-features/admonitions)
:::

:::info This is some info
Some **content** with _Markdown_ `syntax`. Check [this api.](https://docusaurus.io/docs/markdown-features/admonitions)
:::

:::warning This is a warning
Some **content** with _Markdown_ `syntax`. Check [this api.](https://docusaurus.io/docs/markdown-features/admonitions)
:::

:::danger This is a dangerous
Some **content** with _Markdown_ `syntax`. Check [this api.](https://docusaurus.io/docs/markdown-features/admonitions)
:::
```

## QA

* [x] use the staging preview link to check styles are correct for all types of admonitions



Diff:
diff --git a/packages/docusaurus-theme/src/components/call_out/index.tsx b/packages/docusaurus-theme/src/components/call_out/index.tsx
deleted file mode 100644
index ebae6c1c34a7..000000000000
--- a/packages/docusaurus-theme/src/components/call_out/index.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { css } from '@emotion/react';
-import {
-  EuiText,
-  useEuiMemoizedStyles,
-  UseEuiTheme,
-  euiFontSize,
-} from '@elastic/eui';
-import { FunctionComponent, PropsWithChildren } from 'react';
-
-type VARIANTS = 'info' | 'tip' | 'note' | 'danger' | 'warning';
-type TEXT_COLORS = 'textPrimary' | 'textSuccess' | 'textDanger' | 'textWarning';
-
-const VARIANT_TO_COLOR_MAP: Record<
-  VARIANTS,
-  { backgroundVariable: string; colorKey: TEXT_COLORS }
-> = {
-  info: {
-    backgroundVariable: 'var(--eui-background-color-primary)',
-    colorKey: 'textPrimary',
-  },
-  note: {
-    backgroundVariable: 'var(--eui-background-color-primary)',
-    colorKey: 'textPrimary',
-  },
-  tip: {
-    backgroundVariable: 'var(--eui-background-color-success)',
-    colorKey: 'textSuccess',
-  },
-  danger: {
-    backgroundVariable: 'var(--eui-background-color-danger)',
-    colorKey: 'textDanger',
-  },
-  warning: {
-    backgroundVariable: 'var(--eui-background-color-warning)',
-    colorKey: 'textWarning',
-  },
-};
-
-const getStyles = (theme: UseEuiTheme, variant: VARIANTS) => {
-  const { euiTheme } = theme;
-  const colorKey = VARIANT_TO_COLOR_MAP[variant].colorKey;
-  const color = euiTheme.colors[colorKey];
-
-  return {
-    note: css`
-      margin-block-start: var(--eui-theme-content-vertical-spacing);
-
-      &:not(:last-child) {
-        margin-block-end: ${euiTheme.size.xl};
-      }
-
-      .alert {
-        --ifm-alert-background-color: ${VARIANT_TO_COLOR_MAP[variant]
-          .backgroundVariable};
-        --ifm-alert-foreground-color: ${euiTheme.colors.textParagraph};
-        --ifm-alert-padding-horizontal: ${euiTheme.size.base};
-        --ifm-alert-padding-vertical: ${euiTheme.size.base};
-        --ifm-alert-border-width: ${euiTheme.border.width.thin};
-        --ifm-alert-border-left-width: ${euiTheme.border.width.thin};
-        --ifm-alert-border-color: ${color};
-        --ifm-alert-shadow: none;
-
-        [class^='admonitionHeading'] {
-          --ifm-alert-foreground-color: ${color};
-
-          color: var(--ifm-alert-foreground-color);
-        }
-      }
-
-      p {
-        ${euiFontSize(theme, 's')}
-      }
-    `,
-  };
-};
-
-type CallOutProps = PropsWithChildren & {
-  variant: VARIANTS;
-};
-
-export const CallOut: FunctionComponent<CallOutProps> = ({
-  children,
-  variant,
-}) => {
-  const styles = useEuiMemoizedStyles((euiTheme) =>
-    getStyles(euiTheme, variant)
-  );
-
-  return (
-    <EuiText size="s" css={styles.note}>
-      {children}
-    </EuiText>
-  );
-};
diff --git a/packages/docusaurus-theme/src/theme/Admonition/Type/Danger.tsx b/packages/docusaurus-theme/src/theme/Admonition/Type/Danger.tsx
deleted file mode 100644
index a437c0175cb3..000000000000
--- a/packages/docusaurus-theme/src/theme/Admonition/Type/Danger.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { JSX } from 'react';
-import OriginalDanger from '@theme-init/Admonition/Type/Danger';
-import type WarningType from '@theme-init/Admonition/Type/Danger';
-import type { WrapperProps } from '@docusaurus/types';
-import { CallOut } from '../../../components/call_out';
-type Props = WrapperProps<typeof WarningType>;
-
-const Danger = (props: Props): JSX.Element => {
-  return (
-    <CallOut variant="danger">
-      <OriginalDanger {...props} />
-    </CallOut>
-  );
-};
-
-export default Danger;
diff --git a/packages/docusaurus-theme/src/theme/Admonition/Type/Info.tsx b/packages/docusaurus-theme/src/theme/Admonition/Type/Info.tsx
deleted file mode 100644
index 88456f3e12d4..000000000000
--- a/packages/docusaurus-theme/src/theme/Admonition/Type/Info.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { JSX } from 'react';
-import OriginalInfo from '@theme-init/Admonition/Type/Info';
-import type InfoType from '@theme-init/Admonition/Type/Info';
-import type { WrapperProps } from '@docusaurus/types';
-import { CallOut } from '../../../components/call_out';
-type Props = WrapperProps<typeof InfoType>;
-
-const Note = (props: Props): JSX.Element => {
-  return (
-    <CallOut variant="info">
-      <OriginalInfo {...props} />
-    </CallOut>
-  );
-};
-
-export default Note;
diff --git a/packages/docusaurus-theme/src/theme/Admonition/Type/Note.tsx b/packages/docusaurus-theme/src/theme/Admonition/Type/Note.tsx
deleted file mode 100644
index 5d12c29eb51e..000000000000
--- a/packages/docusaurus-theme/src/theme/Admonition/Type/Note.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { JSX } from 'react';
-import OriginalNote from '@theme-init/Admonition/Type/Note';
-import type NoteType from '@theme-init/Admonition/Type/Note';
-import type { WrapperProps } from '@docusaurus/types';
-import { CallOut } from '../../../components/call_out';
-
-type Props = WrapperProps<typeof NoteType>;
-
-const Note = (props: Props): JSX.Element => {
-  return (
-    <CallOut variant="note">
-      <OriginalNote {...props} />
-    </CallOut>
-  );
-};
-
-export default Note;
diff --git a/packages/docusaurus-theme/src/theme/Admonition/Type/Tip.tsx b/packages/docusaurus-theme/src/theme/Admonition/Type/Tip.tsx
deleted file mode 100644
index 2272e21211d2..000000000000
--- a/packages/docusaurus-theme/src/theme/Admonition/Type/Tip.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { JSX } from 'react';
-import OriginalTip from '@theme-init/Admonition/Type/Tip';
-import type TipType from '@theme-init/Admonition/Type/Tip';
-import type { WrapperProps } from '@docusaurus/types';
-import { CallOut } from '../../../components/call_out';
-
-type Props = WrapperProps<typeof TipType>;
-
-const Tip = (props: Props): JSX.Element => {
-  return (
-    <CallOut variant="tip">
-      <OriginalTip {...props} />
-    </CallOut>
-  );
-};
-
-export default Tip;
diff --git a/packages/docusaurus-theme/src/theme/Admonition/Type/Warning.tsx b/packages/docusaurus-theme/src/theme/Admonition/Type/Warning.tsx
deleted file mode 100644
index 8ca19aad6e0e..000000000000
--- a/packages/docusaurus-theme/src/theme/Admonition/Type/Warning.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { JSX } from 'react';
-import OriginalWarning from '@theme-init/Admonition/Type/Warning';
-import type WarningType from '@theme-init/Admonition/Type/Warning';
-import type { WrapperProps } from '@docusaurus/types';
-import { CallOut } from '../../../components/call_out';
-
-type Props = WrapperProps<typeof WarningType>;
-
-const Warning = (props: Props): JSX.Element => {
-  return (
-    <CallOut variant="warning">
-      <OriginalWarning {...props} />
-    </CallOut>
-  );
-};
-
-export default Warning;
diff --git a/packages/docusaurus-theme/src/theme/Admonition/Types.tsx b/packages/docusaurus-theme/src/theme/Admonition/Types.tsx
new file mode 100644
index 000000000000..bfdb5c27a3de
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/Admonition/Types.tsx
@@ -0,0 +1,85 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { EuiCallOut, EuiText } from '@elastic/eui';
+import type { Props } from '@theme-original/Admonition';
+import type AdmonitionTypes from '@theme-original/Admonition/Types';
+
+type CalloutVariant =
+  | 'note'
+  | 'tip'
+  | 'info'
+  | 'accessibility'
+  | 'warning'
+  | 'danger'
+  | 'secondary'
+  | 'important'
+  | 'success'
+  | 'caution';
+type VariantColor = 'accent' | 'primary' | 'success' | 'warning' | 'danger';
+
+const VARIANT_TO_PROPS_MAP: Record<
+  CalloutVariant,
+  { iconType?: string; color?: VariantColor }
+> = {
+  note: { iconType: 'paperClip', color: 'accent' },
+  tip: { iconType: 'faceHappy', color: 'success' },
+  info: { iconType: 'iInCircle', color: 'primary' },
+  accessibility: { iconType: 'accessibility', color: 'primary' },
+  warning: { iconType: 'alert', color: 'warning' },
+  danger: { iconType: 'error', color: 'danger' },
+  // Undocumented legacy admonition type aliases
+  secondary: {},
+  important: {},
+  success: {},
+  caution: {},
+};
+
+// MDXComponents/Paragraph wraps <p> in <EuiText>,
+// this is a workaround to keep styles from <EuiText> in the admonition
+const nestedParagraphStyleReset = css`
+  p.euiText {
+    font-size: inherit;
+    line-height: inherit;
+  }
+`;
+
+const Callout = ({ title, type, children }: Props) => {
+  const variantProps = VARIANT_TO_PROPS_MAP[type as CalloutVariant];
+
+  return (
+    <EuiCallOut
+      title={title}
+      iconType="iInCircle"
+      color="primary"
+      {...variantProps}
+      css={css`
+        margin-block: var(--eui-theme-content-vertical-spacing);
+        ${nestedParagraphStyleReset}
+      `}
+    >
+      {children}
+    </EuiCallOut>
+  );
+};
+
+const admonitionTypes: typeof AdmonitionTypes = {
+  note: Callout,
+  tip: Callout,
+  info: Callout,
+  accessibility: Callout,
+  warning: Callout,
+  danger: Callout,
+  secondary: Callout,
+  important: Callout,
+  success: Callout,
+  caution: Callout,
+};
+
+export default admonitionTypes;
diff --git a/packages/docusaurus-theme/src/theme/MDXComponents/Paragraph.tsx b/packages/docusaurus-theme/src/theme/MDXComponents/Paragraph.tsx
index 53b8bdcbf408..1a1208f13aaf 100644
--- a/packages/docusaurus-theme/src/theme/MDXComponents/Paragraph.tsx
+++ b/packages/docusaurus-theme/src/theme/MDXComponents/Paragraph.tsx
@@ -26,10 +26,8 @@ export const Paragraph = ({ children }: HTMLAttributes<HTMLParagraphElement>) =>
   const styles = useEuiMemoizedStyles(getParagraphStyles);
 
   return (
-    <EuiText size="m" css={styles}>
-      <p>
-        {children}
-      </p>
+    <EuiText size="m" css={styles} component="p">
+      {children}
     </EuiText>
   );
 };
diff --git a/packages/docusaurus-theme/src/theme/theme.d.ts b/packages/docusaurus-theme/src/theme/theme.d.ts
index ef999f973ac5..a0c680ff1f7e 100644
--- a/packages/docusaurus-theme/src/theme/theme.d.ts
+++ b/packages/docusaurus-theme/src/theme/theme.d.ts
@@ -7,6 +7,32 @@ declare module '@site/*';
 // NOTE: when using swizzle --wrap there is the approach to do the following:
 // type Props = WrapperProps<typeof NameOfComponent> but it will result in `any` type
 
+// original: https://github.com/facebook/docusaurus/blob/8b877d27d4b1bcd5c2ee13dde8332407a1c26447/packages/docusaurus-theme-classic/src/theme-classic.d.ts#L42
+declare module '@theme-original/Admonition' {
+  import type {ReactNode} from 'react';
+
+  export interface Props {
+    readonly children: ReactNode;
+    readonly type: string;
+    readonly icon?: ReactNode;
+    readonly title?: ReactNode;
+    readonly className?: string;
+  }
+
+  export default function Admonition(props: Props): JSX.Element;
+}
+
+declare module '@theme/Admonition/Types' {
+  import type {ComponentType} from 'react';
+  import type {Props} from '@theme-original/Admonition';
+
+  const AdmonitionTypes: {
+    [admonitionType: string]: ComponentType<Props>;
+  };
+
+  export default AdmonitionTypes;
+}
+
 // original: https://github.com/facebook/docusaurus/blob/8b877d27d4b1bcd5c2ee13dde8332407a1c26447/packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts#L635
 declare module '@theme-original/DocRoot' {
   import type { RouteConfigComponentProps } from 'react-router-config';
diff --git a/packages/website/docs/components/display/card.mdx b/packages/website/docs/components/display/card.mdx
index dd03b07399fb..93cd1288f90d 100644
--- a/packages/website/docs/components/display/card.mdx
+++ b/packages/website/docs/components/display/card.mdx
@@ -151,7 +151,7 @@ export default () => (
 
 Footers can contain any number of elements and will always align to the bottom of the card. However, if you supply a footer containing a **EuiButton** you **must not** also give it an `onClick`.
 
-:::note Accessibility requirement
+:::accessibility Accessibility requirement
 When using footers to display generic "Go" buttons, you must provide an `aria-label` to the button itself that refers back to the title of the card.
 :::
 
@@ -414,7 +414,7 @@ export default () => {
 };
 ```
 
-:::note Accessibility requirement
+:::accessibility Accessibility requirement
 When used as a radio group, you must provide a `fieldset` with a `legend` for accessibility.
 :::
 
diff --git a/packages/website/docs/components/display/comment_list.mdx b/packages/website/docs/components/display/comment_list.mdx
index 7668eea59fdf..19510b357418 100644
--- a/packages/website/docs/components/display/comment_list.mdx
+++ b/packages/website/docs/components/display/comment_list.mdx
@@ -7,7 +7,7 @@ id: display_comment_list
 
 The **EuiCommentList** is a timeline component built on top of [**EuiTimeline**](../timeline). It allows you to display comments or logged actions that either a user or a system has performed.
 
-:::note Accessibility recommendation
+:::accessibility Accessibility recommendation
 Provide a descriptive `aria-label` or the ID of an external label to the `aria-labelledby` prop of the **EuiCommentList**. A `timelineAvatarAriaLabel` should be provided for every **EuiComment** with or without a `timelineAvatar` as `IconType`.
 :::
 
diff --git a/packages/website/docs/components/display/drag_and_drop.mdx b/packages/website/docs/components/display/drag_and_drop.mdx
index 14a80a551295..fd9d9a60742e 100644
--- a/packages/website/docs/components/display/drag_and_drop.mdx
+++ b/packages/website/docs/components/display/drag_and_drop.mdx
@@ -143,7 +143,7 @@ By default the entire element surface can initiate a drag. To specify an element
 
 The `provided` parameter on the **EuiDraggable** `children` render prop has all data required for functionality. Along with the `customDragHandle` flag,`provided.dragHandleProps` needs to be added to the intended handle element.
 
-:::note Accessibility requirement
+:::accessibility Accessibility requirement
 **Icon-only** custom drag handles require an accessible label. Add an `aria-label="Drag handle"` attribute to your React component or HTML element that receives`provided.dragHandleProps`.
 :::
 
diff --git a/packages/website/docs/components/display/icons/overview.mdx b/packages/website/docs/components/display/icons/overview.mdx
index be3bb64aa6f4..91e330929a27 100644
--- a/packages/website/docs/components/display/icons/overview.mdx
+++ b/packages/website/docs/components/display/icons/overview.mdx
@@ -13,7 +13,7 @@ import { EuiCodeBlock, EuiSpacer, EuiSplitPanel, EuiToken } from '@elastic/eui';
 <EuiIcon type="grid" />
 ```
 
-:::note Accessibility recommendation
+:::accessibility Accessibility recommendation
 If possible, provide a descriptive title based on the icon use. If no title is provided, the icon is considered purely decorative, and it will default to `aria-hidden=true`.
 :::
 
diff --git a/packages/website/docs/components/display/skeleton.mdx b/packages/website/docs/components/display/skeleton.mdx
index 0063db7cd41a..393a35394cd6 100644
--- a/packages/website/docs/components/display/skeleton.mdx
+++ b/packages/website/docs/components/display/skeleton.mdx
@@ -7,7 +7,7 @@ id: display_skeleton
 
 The **EuiSkeleton** components are placeholder components for content which has yet to load. They provide meaningful previews, avoid layout content shifts, and add accessible announcements to screen readers when content is done loading.
 
-:::note Accessibility recommendation
+:::accessibility Accessibility recommendation
 The `contentAriaLabel` prop should be used to help describe the type of content that is loading to screen reader users. If you do not provide a descriptive label and have have multiple loading skeletons on the page, screen reader users may hear a multitude of “Loaded” messages in a row, with no meaningful indication of what actually loaded.
 :::
 
diff --git a/packages/website/docs/components/display/timeline.mdx b/packages/website/docs/components/display/timeline.mdx
index bc091bfca79e..7d9657423a96 100644
--- a/packages/website/docs/components/display/timeline.mdx
+++ b/packages/website/docs/components/display/timeline.mdx
@@ -12,7 +12,7 @@ This component allows you to create any type of timeline, but for more specific
 *   [**EuiSteps**](../../navigation/steps): a timeline that allows you to present instructional content that must be conducted in a particular order and might contain progress indications.
 *   [**EuiCommentList**](../comment-list): a timeline that allows you to display comments or logging actions that either a user or a system has performed.
 
-:::note Accessibility requirement
+:::accessibility Accessibility requirement
 For accessibility, it is required to wrap your **EuiTimelineItem**'s with a **EuiTimeline**. It is highly recommended to provide a descriptive `aria-label`, or a text node ID of an external label to the `aria-labelledby` prop of the **EuiTimeline**.
 :::
 
diff --git a/packages/website/docs/components/forms/form_layouts/compressed_forms.mdx b/packages/website/docs/components/forms/form_layouts/compressed_forms.mdx
index 931a7b8c3a0a..a71b5af9f10a 100644
--- a/packages/website/docs/components/forms/form_layouts/compressed_forms.mdx
+++ b/packages/website/docs/components/forms/form_layouts/compressed_forms.mdx
@@ -406,7 +406,7 @@ export default () => {
 
 This is an example of how to combine compressed form controls with from rows, labels, prepend and appends in a column layout.
 
-:::note Accessibility recommendation
+:::accessibility Accessibility recommendation
 Pay close attention to the patterns of using `htmlFor` and `aria-label`. For best results, each form control that is not wrapped in an EuiFormRow should be supplied an `id`.
 :::
 
diff --git a/packages/website/docs/components/forms/selection/checkboxes_radios/switch.mdx b/packages/website/docs/components/forms/selection/checkboxes_radios/switch.mdx
index 912d0feb8384..13287b67ad7b 100644
--- a/packages/website/docs/components/forms/selection/checkboxes_radios/switch.mdx
+++ b/packages/website/docs/components/forms/selection/checkboxes_radios/switch.mdx
@@ -40,7 +40,7 @@ Make sure to pass a `label` to ensure a larger clickable area and ensure that sc
 
 If the switch is described in some other manner, like when using an [**EuiFormRow**](../../form_layouts/form_row.mdx), you can eliminate the visible label with `showLabel={false}` or use it to further describe the state.
 
-:::note Accessibility requirement
+:::accessibility Accessibility requirement
 When providing the state as the label, you'll need to provide an `aria-describedby` with the label's `id` to associate it with the switch.
 :::
 
diff --git a/packages/website/docs/components/layout/accordion.mdx b/packages/website/docs/components/layout/accordion.mdx
index 256baa682da3..323c170b70b4 100644
--- a/packages/website/docs/components/layout/accordion.mdx
+++ b/packages/website/docs/components/layout/accordion.mdx
@@ -399,7 +399,7 @@ In some cases you might want to prevent the user from closing the **EuiAccordion
 
 The `isDisabled` prop will disable interaction on the button and the arrow. Use it in conjunction with `initialIsOpen` to achieve the desired effect.
 
-:::note Accessibility recommendation
+:::accessibility Accessibility recommendation
 When disabling the interaction of accordions based on user input, it's advisable to ensure there is further explanation through the use of help or error text.
 :::
 
@@ -530,7 +530,7 @@ Passing interactive content like links, buttons, or form elements as the `button
 
 If you don't want the interactive content to trigger the accordion expansion, you will have to apply `e.stopPropagation()` to your element manually.
 
-:::note Accessibility requirement
+:::accessibility Accessibility requirement
 Accordions need a focusable button for accessibility, so changing the element to anything other than a button will enforce the display of the arrow.
 :::
 
diff --git a/packages/website/docs/components/layout/flyout/flyout.mdx b/packages/website/docs/components/layout/flyout/flyout.mdx
index e55bfdfaa1bb..fe29d60f27a2 100644
--- a/packages/website/docs/components/layout/flyout/flyout.mdx
+++ b/packages/website/docs/components/layout/flyout/flyout.mdx
@@ -9,7 +9,7 @@ id: layout_flyout
 
 Like modals, you control the visibility of the flyout using your own state management, but **EuiFlyout** requires an `onClose` handler for it's internal dismiss buttons.
 
-:::note Accessibility recommendation
+:::accessibility Accessibility recommendation
 Use `aria-labelledby={headingId}` to announce the flyout to screen readers.
 :::
 
diff --git a/packages/website/docs/components/layout/popover.mdx b/packages/website/docs/components/layout/popover.mdx
index ba9dfa53682f..c853baf6b11a 100644
--- a/packages/website/docs/components/layout/popover.mdx
+++ b/packages/website/docs/components/layout/popover.mdx
@@ -1003,7 +1003,7 @@ export default () => {
 
 If you want a specific child element of the popover to immediately gain focus when the popover is open, use the `initialFocus` prop to pass either a selector or DOM node.
 
-:::note Accessibility recommendation
+:::accessibility Accessibility recommendation
 It can be jarring for keyboard and screen reader users to immediately land on an element with no other context. To alleviate this, ensure that your initial focus target makes sense alone or is the primary goal of the popover.
 :::
 
diff --git a/packages/website/docs/components/layout/resizable_container.mdx b/packages/website/docs/components/layout/resizable_container.mdx
index c612d76c188e..dd5a941b9dbb 100644
--- a/packages/website/docs/components/layout/resizable_container.mdx
+++ b/packages/website/docs/components/layout/resizable_container.mdx
@@ -9,7 +9,7 @@ import { faker } from '@faker-js/faker';
 
 This component is handy for various resizable containers. **EuiResizableContainer** uses the [React Render Props](https://reactjs.org/docs/render-props.html#using-props-other-than-render) technique to provide **EuiResizablePanel** and **EuiResizableButton** components for layout, and `actions` for custom handling collapse and resize functionality in your app. Wrap parts of your content with the **EuiResizablePanel** component and put the **EuiResizableButton** component between.
 
-:::note Accessibility recommendation
+:::accessibility Accessibility recommendation
 Consider adding a `tabIndex=0` prop to the **EuiResizableContainer** if it is a fixed height or has a lot of content. This ensures keyboard users can set focus on the container and scroll to the bottom using arrow keys.
 :::
 
@@ -1120,4 +1120,3 @@ import docgen from '@elastic/eui-docgen/dist/components/resizable_container';
 <PropTable definition={docgen.EuiResizableContainer} />
 
 <PropTable definition={docgen.EuiResizableButton} />
-
diff --git a/packages/website/docs/components/navigation/breadcrumbs.mdx b/packages/website/docs/components/navigation/breadcrumbs.mdx
index 02215fbce709..285639b6b407 100644
--- a/packages/website/docs/components/navigation/breadcrumbs.mdx
+++ b/packages/website/docs/components/navigation/breadcrumbs.mdx
@@ -11,7 +11,7 @@ See [**EuiTabs guidelines**](/docs/navigation/tabs/guidelines) if your applicati
 
 **EuiBreadcrumbs** requires an array of **EuiBreadcrumb** objects as `breadcrumbs` and handles truncation, including middle-truncation in the case of many items, and mobile responsiveness. Each item accepts an `href` prop, though we recommend the last item represent the current page and therefore the link is unnecessary.
 
-:::note Accessibility recommendation
+:::accessibility Accessibility recommendation
 Provide a descriptive `aria-label` for each set of breadcrumbs.
 :::
 
diff --git a/packages/website/docs/components/navigation/button/button_group.mdx b/packages/website/docs/components/navigation/button/button_group.mdx
index c20f296441fd..c60eb9041f08 100644
--- a/packages/website/docs/components/navigation/button/button_group.mdx
+++ b/packages/website/docs/components/navigation/button/button_group.mdx
@@ -8,7 +8,7 @@ sidebar_position: 4
 
 An **EuiButtonGroup** is for indicating _selection only_. They utilize the `type="single"` or `"multi"` prop to determine whether multiple or only single selections are allowed per group.
 
-:::note Accessibility recommendation
+:::accessibility Accessibility recommendation
 In order for groups to be properly read as groups with a title, the `legend` prop is **required**. This is only for accessibility, however, so it will be visibly hidden.
 :::
 
diff --git a/packages/website/docs/components/navigation/button/button_icon.mdx b/packages/website/docs/components/navigation/button/button_icon.mdx
index cc30f1244a43..bacfa031441e 100644
--- a/packages/website/docs/components/navigation/button/button_icon.mdx
+++ b/packages/website/docs/components/navigation/button/button_icon.mdx
@@ -8,7 +8,7 @@ sidebar_position: 3
 
 An **EuiButtonIcon** is a button that only contains an icon (no text). Use the `display` and `size` props to match the appearance of your **EuiButtonIcon** to other standard buttons. By default they will appear as `xs`, `empty` buttons.
 
-:::note Accessibility requirement
+:::accessibility Accessibility requirement
 **EuiButtonIcon** requires an `aria-label` to express the meaning to screen readers.
 :::
 
@@ -164,7 +164,7 @@ import {
 } from '@elastic/eui';
 
 export default () => (
-  <EuiFlexGroup responsive={false} gutterSize="s" alignItems="flexStart">          
+  <EuiFlexGroup responsive={false} gutterSize="s" alignItems="flexStart">
     <EuiFlexItem grow={false}>
       <EuiButtonIcon display="base" iconType="lensApp" size="m" aria-label="Lens" />
     </EuiFlexItem>
diff --git a/packages/website/docs/components/navigation/button/patterns.mdx b/packages/website/docs/components/navigation/button/patterns.mdx
index 6be86b43d92c..9e65b863c941 100644
--- a/packages/website/docs/components/navigation/button/patterns.mdx
+++ b/packages/website/docs/components/navigation/button/patterns.mdx
@@ -126,7 +126,7 @@ export default () => {
 
 2.  If your button only changes the **visual** appearance, you must add `aria-pressed` passing a boolean for the on and off states. All EUI button types provide a helper prop for this called `isSelected`.
 
-:::note Accessibility recommendation
+:::accessibility Accessibility recommendation
 Do not add `aria-pressed` or `isSelected` if you also change the readable text.
 :::
 
@@ -166,4 +166,4 @@ export default () => {
     </>
   );
 };
-```
\ No newline at end of file
+```
diff --git a/packages/website/docs/components/navigation/context_menu.mdx b/packages/website/docs/components/navigation/context_menu.mdx
index 85bc977c69e3..2eff855e62bf 100644
--- a/packages/website/docs/components/navigation/context_menu.mdx
+++ b/packages/website/docs/components/navigation/context_menu.mdx
@@ -240,7 +240,7 @@ export default () => {
 
 Use **EuiContextMenuPanel** for simple, non-nested context menus. The below pagination example has no nesting and no title.
 
-:::note Accessibility recommendation
+:::accessibility Accessibility recommendation
 The selected context menu item should receive the `aria-current="true"` attribute, which tells screen readers which item is selected.
 :::
 
diff --git a/packages/website/docs/components/navigation/key_pad_menu.mdx b/packages/website/docs/components/navigation/key_pad_menu.mdx
index 472efaeb6a5e..cc45f7dbe0b4 100644
--- a/packages/website/docs/components/navigation/key_pad_menu.mdx
+++ b/packages/website/docs/components/navigation/key_pad_menu.mdx
@@ -9,7 +9,7 @@ The **EuiKeyPadMenu** component presents **EuiKeyPadMenuItems** in a tiled forma
 
 **EuiKeyPadMenu** is just a wrapping element for creating the list elements but you must declare each **EuiKeyPadMenu** component manually.
 
-:::note Accessibility recommendation
+:::accessibility Accessibility recommendation
 If the menu provides navigation for your application, wrap the **EuiKeyPadMenu** with `<nav aria-label="Nav title"></nav>`.
 :::
 
diff --git a/packages/website/docs/components/navigation/pagination/overview.mdx b/packages/website/docs/components/navigation/pagination/overview.mdx
index 761eddce574c..e6394902e124 100644
--- a/packages/website/docs/components/navigation/pagination/overview.mdx
+++ b/packages/website/docs/components/navigation/pagination/overview.mdx
@@ -11,7 +11,7 @@ Some EUI components have pagination built-in, like [**EuiBasicTable**](/docs/tab
 
 **EuiPagination** accepts a total `pageCount` and only shows up to 5 consecutive pages, with shortcuts to the first and/or last page. It also requires the parent component to maintain the current `activePage` and handle the `onPageClick`.
 
-:::note Accessibility recommendation
+:::accessibility Accessibility recommendation
 Provide a descriptive `aria-label` for each pagination set.
 :::
 
diff --git a/packages/website/docs/components/navigation/tree_view.mdx b/packages/website/docs/components/navigation/tree_view.mdx
index e0faa26648ea..457d9e971799 100644
--- a/packages/website/docs/components/navigation/tree_view.mdx
+++ b/packages/website/docs/components/navigation/tree_view.mdx
@@ -11,7 +11,7 @@ id: navigation_tree_view
 
 Each node requires a `label` and a unique `id`. The `icon` prop accepts any [icon or token](/docs/display/icons). You can also specify a different icon for the open state with the `iconWhenExpanded` prop. Use the nodes' `children` prop to nest more nodes.
 
-:::note Accessibility recommendation
+:::accessibility Accessibility recommendation
 Provide a descriptive `aria-label` for each tree view. This component also builds in keyboard navigation allowing users to traverse the tree using the arrow keys, spacebar, and return.
 :::
 
diff --git a/packages/website/docusaurus.config.ts b/packages/website/docusaurus.config.ts
index 3869e06501ce..906f1e4c8894 100644
--- a/packages/website/docusaurus.config.ts
+++ b/packages/website/docusaurus.config.ts
@@ -44,6 +44,10 @@ const config: Config = {
         docs: {
           sidebarPath: './sidebars.ts',
           editUrl: 'https://github.com/elastic/eui/tree/main/packages/website/',
+          admonitions: {
+            keywords: ['accessibility'],
+            extendDefaults: true,
+          },
         },
         blog: {
           showReadingTime: true,


Reviews:
user: login: acstll
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-28T07:59:46Z
user: login: acstll
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-28T08:36:29Z
user: login: tkajtoch
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-31T09:50:37Z
user: login: weronikaolejniczak
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-31T10:06:52Z
user: login: weronikaolejniczak
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-31T10:09:34Z
user: login: weronikaolejniczak
body: ## Testing notes

### ✅ Warning
![Screenshot 2025-03-31 at 12 07 47](https://github.com/user-attachments/assets/cc41e7df-b852-4301-9300-f6942291fd56)

### ✅ Tip
![Screenshot 2025-03-31 at 12 10 02](https://github.com/user-attachments/assets/62d6d608-800f-46fd-b181-f79efce40263)

**non-blocking suggestion:** I'd use a bulb icon type, it seems more standardized to me than a smiling face.

### ✅ Note
![Screenshot 2025-03-31 at 12 10 21](https://github.com/user-attachments/assets/fab8f5cb-15f3-4aee-8214-5f9b6ea0e8db)

**non-blocking suggestion:** I'd use `accentSecondary`, `accent` color seems too similar to danger-style colors.

### ✅ Danger
![Screenshot 2025-03-31 at 12 19 41](https://github.com/user-attachments/assets/74f0c9fd-6dbf-4053-b5e8-4208f99d0946)

### Outside the scope

I have noticed that on several pages the `note` variant is used for accessibility recommendations. To me it's better to follow the prod way of `info` variant with an accessibility icon.

**Affected pages:**

![Screenshot 2025-03-31 at 12 22 12](https://github.com/user-attachments/assets/a479bd73-014a-413d-89d4-2af76412c625)


| EUI+ | Current docs |
| ----- | ------------- |
| ![Screenshot 2025-03-31 at 12 11 32](https://github.com/user-attachments/assets/62aba5d5-0c01-4db9-bafc-ae1fdadd7170) | ![Screenshot 2025-03-31 at 12 11 37](https://github.com/user-attachments/assets/ed3cf90f-395b-40d0-9168-982c73227e1b) |



state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-31T10:23:11Z
user: login: weronikaolejniczak
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-31T10:26:31Z
user: login: acstll
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-31T14:17:19Z
user: login: acstll
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-31T14:32:09Z
user: login: weronikaolejniczak
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-31T16:50:46Z
user: login: weronikaolejniczak
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-31T16:51:31Z
user: login: weronikaolejniczak
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-31T16:53:20Z
user: login: weronikaolejniczak
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-31T17:01:58Z
user: login: acstll
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-31T17:06:37Z

Review comments:
diff_hunk: @@ -0,0 +1,77 @@
+/**
+ * Copyright (c) TODO
+ */
path: packages/docusaurus-theme/src/theme/Admonition/Types.tsx
user: login: acstll
body: I wasn't sure this should be Facebook, Elastic or nothing 😅
created_at: 2025-03-28T07:59:46Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,78 @@
+/**
+ * Copyright (c) TODO
+ */
+
+import { css } from '@emotion/react';
+import { EuiCallOut, EuiText } from '@elastic/eui';
+import type { Props } from '@theme-original/Admonition';
+import type AdmonitionTypes from '@theme-original/Admonition/Types';
+
+type CalloutVariant =
+  | 'note'
+  | 'tip'
+  | 'info'
+  | 'warning'
+  | 'danger'
+  | 'secondary'
+  | 'important'
+  | 'success'
+  | 'caution';
+type VariantColor = 'accent' | 'primary' | 'success' | 'warning' | 'danger';
+
+const VARIANT_TO_PROPS_MAP: Record<
+  CalloutVariant,
+  { iconType?: string; color?: VariantColor }
+> = {
+  note: { iconType: 'paperClip', color: 'accent' },
+  tip: { iconType: 'faceHappy', color: 'success' },
+  info: { iconType: 'iInCircle', color: 'primary' },
path: packages/docusaurus-theme/src/theme/Admonition/Types.tsx
user: login: acstll
body: `iInCircle` is smaller than the rest, not so important but maybe it'd be nice to use a different icon, maybe `documentation`?
created_at: 2025-03-28T08:36:29Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,77 @@
+/**
+ * Copyright (c) TODO
+ */
path: packages/docusaurus-theme/src/theme/Admonition/Types.tsx
user: login: tkajtoch
body: Elastic copyright is fine here. We'll add additional license comments to files copied from the docusaurus repo.
created_at: 2025-03-31T09:50:36Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,78 @@
+/**
+ * Copyright (c) TODO
+ */
+
+import { css } from '@emotion/react';
+import { EuiCallOut, EuiText } from '@elastic/eui';
+import type { Props } from '@theme-original/Admonition';
+import type AdmonitionTypes from '@theme-original/Admonition/Types';
+
+type CalloutVariant =
+  | 'note'
+  | 'tip'
+  | 'info'
+  | 'warning'
+  | 'danger'
+  | 'secondary'
+  | 'important'
+  | 'success'
+  | 'caution';
+type VariantColor = 'accent' | 'primary' | 'success' | 'warning' | 'danger';
+
+const VARIANT_TO_PROPS_MAP: Record<
+  CalloutVariant,
+  { iconType?: string; color?: VariantColor }
+> = {
+  note: { iconType: 'paperClip', color: 'accent' },
+  tip: { iconType: 'faceHappy', color: 'success' },
+  info: { iconType: 'iInCircle', color: 'primary' },
path: packages/docusaurus-theme/src/theme/Admonition/Types.tsx
user: login: weronikaolejniczak
body: @acstll it is smaller than the rest indeed but at the same time, it's the most standardized one for info-type alert. I would **leave it as is** especially because all of the callouts are usually used individually, not right next to each other where we could notice the difference.

We plan on migrating the icons, that's also sth to consider.

Wdyt?
created_at: 2025-03-31T10:06:52Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,78 @@
+/**
+ * Copyright (c) TODO
+ */
+
+import { css } from '@emotion/react';
+import { EuiCallOut, EuiText } from '@elastic/eui';
+import type { Props } from '@theme-original/Admonition';
+import type AdmonitionTypes from '@theme-original/Admonition/Types';
+
+type CalloutVariant =
+  | 'note'
+  | 'tip'
+  | 'info'
+  | 'warning'
+  | 'danger'
+  | 'secondary'
+  | 'important'
+  | 'success'
+  | 'caution';
+type VariantColor = 'accent' | 'primary' | 'success' | 'warning' | 'danger';
+
+const VARIANT_TO_PROPS_MAP: Record<
+  CalloutVariant,
+  { iconType?: string; color?: VariantColor }
+> = {
+  note: { iconType: 'paperClip', color: 'accent' },
+  tip: { iconType: 'faceHappy', color: 'success' },
+  info: { iconType: 'iInCircle', color: 'primary' },
path: packages/docusaurus-theme/src/theme/Admonition/Types.tsx
user: login: weronikaolejniczak
body: **non-blocking suggestion:**

It could be beneficial to add another variant, color primary but iconType set to accessibility, for accessibility-specific alerts (as in the prod).
created_at: 2025-03-31T10:09:34Z
author_association: CONTRIBUTOR
diff_hunk: @@ -26,10 +26,8 @@ export const Paragraph = ({ children }: HTMLAttributes<HTMLParagraphElement>) =>
   const styles = useEuiMemoizedStyles(getParagraphStyles);
 
   return (
-    <EuiText size="m" css={styles}>
-      <p>
-        {children}
-      </p>
+    <EuiText size="m" css={styles} component="p">
path: packages/docusaurus-theme/src/theme/MDXComponents/Paragraph.tsx
user: login: weronikaolejniczak
body: Could you explain the difference between the previous and `component="p"`?

> /**
	     * The HTML element/tag to render.
	     * Use with care when nesting multiple components to ensure valid XHTML:
	     * - `<div>` and other block tags are not valid to use inside `<p>`. If using the `<p>` tag, we recommend passing strings/text only.
	     * - `<span>` is valid to be nested in any tag, and can have any tag nested within it.
	     */

Are we sure we won't pass any block tags within what's parsed as a Paragraph? Is it always plain text?
created_at: 2025-03-31T10:26:31Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,78 @@
+/**
+ * Copyright (c) TODO
+ */
+
+import { css } from '@emotion/react';
+import { EuiCallOut, EuiText } from '@elastic/eui';
+import type { Props } from '@theme-original/Admonition';
+import type AdmonitionTypes from '@theme-original/Admonition/Types';
+
+type CalloutVariant =
+  | 'note'
+  | 'tip'
+  | 'info'
+  | 'warning'
+  | 'danger'
+  | 'secondary'
+  | 'important'
+  | 'success'
+  | 'caution';
+type VariantColor = 'accent' | 'primary' | 'success' | 'warning' | 'danger';
+
+const VARIANT_TO_PROPS_MAP: Record<
+  CalloutVariant,
+  { iconType?: string; color?: VariantColor }
+> = {
+  note: { iconType: 'paperClip', color: 'accent' },
+  tip: { iconType: 'faceHappy', color: 'success' },
+  info: { iconType: 'iInCircle', color: 'primary' },
path: packages/docusaurus-theme/src/theme/Admonition/Types.tsx
user: login: acstll
body: re: the info icon, I agree, we can leave as is 👍 

re: the accessibility variant, I don't see why we wouldn't add it, you think it's ok if the type is `a11y` instead of `accessibility` (e.g. `:::a11y`)?
created_at: 2025-03-31T14:17:19Z
author_association: CONTRIBUTOR
diff_hunk: @@ -26,10 +26,8 @@ export const Paragraph = ({ children }: HTMLAttributes<HTMLParagraphElement>) =>
   const styles = useEuiMemoizedStyles(getParagraphStyles);
 
   return (
-    <EuiText size="m" css={styles}>
-      <p>
-        {children}
-      </p>
+    <EuiText size="m" css={styles} component="p">
path: packages/docusaurus-theme/src/theme/MDXComponents/Paragraph.tsx
user: login: acstll
body: the only difference is that with the change we don't wrap all paragraphs in a `div`, which does not hurt but it's unnecessary

previously, in the main content area we get:

```html
<h3>Heading</h3>
<div class="euiText css-hmz0yk-euiText-m">
  <p>Some text</p>
</div>
<div class="euiText css-hmz0yk-euiText-m">
  <p>Some text</p>
</div>
<div class="euiText css-hmz0yk-euiText-m">
  <p>Some text</p>
</div>
```

with the change, we'd get:

```html
<h3>Heading</h3>
<p class="euiText css-hmz0yk-euiText-m">Some text</p>
<p class="euiText css-hmz0yk-euiText-m">Some text</p>
<p class="euiText css-hmz0yk-euiText-m">Some text</p>
```

> Are we sure we won't pass any block tags within what's parsed as a Paragraph? Is it always plain text?

this could happen already now since we render `<div class="euiText"><p>{children}</p></div>`, but I think it's unlikely coming form markdown
created_at: 2025-03-31T14:32:09Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,78 @@
+/**
+ * Copyright (c) TODO
+ */
+
+import { css } from '@emotion/react';
+import { EuiCallOut, EuiText } from '@elastic/eui';
+import type { Props } from '@theme-original/Admonition';
+import type AdmonitionTypes from '@theme-original/Admonition/Types';
+
+type CalloutVariant =
+  | 'note'
+  | 'tip'
+  | 'info'
+  | 'warning'
+  | 'danger'
+  | 'secondary'
+  | 'important'
+  | 'success'
+  | 'caution';
+type VariantColor = 'accent' | 'primary' | 'success' | 'warning' | 'danger';
+
+const VARIANT_TO_PROPS_MAP: Record<
+  CalloutVariant,
+  { iconType?: string; color?: VariantColor }
+> = {
+  note: { iconType: 'paperClip', color: 'accent' },
+  tip: { iconType: 'faceHappy', color: 'success' },
+  info: { iconType: 'iInCircle', color: 'primary' },
path: packages/docusaurus-theme/src/theme/Admonition/Types.tsx
user: login: weronikaolejniczak
body: absolutely, `a11y` is easy to write
created_at: 2025-03-31T16:50:46Z
author_association: CONTRIBUTOR
diff_hunk: @@ -26,10 +26,8 @@ export const Paragraph = ({ children }: HTMLAttributes<HTMLParagraphElement>) =>
   const styles = useEuiMemoizedStyles(getParagraphStyles);
 
   return (
-    <EuiText size="m" css={styles}>
-      <p>
-        {children}
-      </p>
+    <EuiText size="m" css={styles} component="p">
path: packages/docusaurus-theme/src/theme/MDXComponents/Paragraph.tsx
user: login: weronikaolejniczak
body: Thank you for the explanation and I agree, it's better now that we don't add this unnecessary node
created_at: 2025-03-31T16:51:31Z
author_association: CONTRIBUTOR
diff_hunk: @@ -151,7 +151,7 @@ export default () => (
 
 Footers can contain any number of elements and will always align to the bottom of the card. However, if you supply a footer containing a **EuiButton** you **must not** also give it an `onClick`.
 
-:::note Accessibility requirement
+:::accessibility Accessibility requirement
path: packages/website/docs/components/display/card.mdx
user: login: weronikaolejniczak
body: `:::accessibility` would be easy and fast to replace with `:::a11y`, right? I'd go with that name instead, it's just as understandable and much shorter 😄 
created_at: 2025-03-31T16:53:20Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,85 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { EuiCallOut, EuiText } from '@elastic/eui';
+import type { Props } from '@theme-original/Admonition';
+import type AdmonitionTypes from '@theme-original/Admonition/Types';
+
+type CalloutVariant =
+  | 'note'
+  | 'tip'
+  | 'info'
+  | 'accessibility'
+  | 'warning'
+  | 'danger'
+  | 'secondary'
+  | 'important'
+  | 'success'
+  | 'caution';
+type VariantColor = 'accent' | 'primary' | 'success' | 'warning' | 'danger';
+
+const VARIANT_TO_PROPS_MAP: Record<
+  CalloutVariant,
+  { iconType?: string; color?: VariantColor }
+> = {
+  note: { iconType: 'paperClip', color: 'accent' },
+  tip: { iconType: 'faceHappy', color: 'success' },
path: packages/docusaurus-theme/src/theme/Admonition/Types.tsx
user: login: weronikaolejniczak
body: You're right, I can't find the bulb icon either. Here are some alternatives:

![Screenshot 2025-03-31 at 18 59 52](https://github.com/user-attachments/assets/7b6f8260-75a4-44eb-8b4d-6b6d14c37a66)
![Screenshot 2025-03-31 at 19 00 28](https://github.com/user-attachments/assets/383210b6-1a7e-442e-abc1-9cc950700c8f)

I would vote for creating a ticket for it in M2 (after icons migration).
created_at: 2025-03-31T17:01:58Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,78 @@
+/**
+ * Copyright (c) TODO
+ */
+
+import { css } from '@emotion/react';
+import { EuiCallOut, EuiText } from '@elastic/eui';
+import type { Props } from '@theme-original/Admonition';
+import type AdmonitionTypes from '@theme-original/Admonition/Types';
+
+type CalloutVariant =
+  | 'note'
+  | 'tip'
+  | 'info'
+  | 'warning'
+  | 'danger'
+  | 'secondary'
+  | 'important'
+  | 'success'
+  | 'caution';
+type VariantColor = 'accent' | 'primary' | 'success' | 'warning' | 'danger';
+
+const VARIANT_TO_PROPS_MAP: Record<
+  CalloutVariant,
+  { iconType?: string; color?: VariantColor }
+> = {
+  note: { iconType: 'paperClip', color: 'accent' },
+  tip: { iconType: 'faceHappy', color: 'success' },
+  info: { iconType: 'iInCircle', color: 'primary' },
path: packages/docusaurus-theme/src/theme/Admonition/Types.tsx
user: login: acstll
body: `a11y` was not working as expected, maybe me doing silly things or something with the md parsing… * shrug * in any case I added it as `accessibility` (being explicit is also nice)
created_at: 2025-03-31T17:06:37Z
author_association: CONTRIBUTOR

PR comments:
user: login: acstll
created_at: 2025-03-31T14:35:45Z
body: thanks for the awesome review @weronikaolejniczak! 🙏 

> non-blocking suggestion: I'd use a bulb icon type, it seems more standardized to me than a smiling face.

I actually wanted to use a bulb icon but I couldn't find any… do we have one? 😁 

> non-blocking suggestion: I'd use accentSecondary, accent color seems too similar to danger-style colors.

in the docs there's no `accentSecondary` for the `color` prop anymore, I have a hunch that was intentional but I'm not sure — I agree it may look dangerish but I would leave it like this for now and revisit in M2, wdyt?

> I have noticed that on several pages the note variant is used for accessibility recommendations. To me it's better to follow the prod way of info variant with an accessibility icon.

this is a nice improvement, I think we can change this in this PR already, wdyt?


author_association: CONTRIBUTOR
user: login: acstll
created_at: 2025-03-31T15:16:41Z
body: @weronikaolejniczak I added the `:::accessibility` admonition type, I know the PR is approved but I'll leave it open a bit longer just in case you have any other comments — thanks again for the review 🙂 

<img width="838" alt="image" src="https://github.com/user-attachments/assets/f769b2a6-44ab-4c73-ad20-4e3d5a981dd4" />

author_association: CONTRIBUTOR
user: login: kibanamachine
created_at: 2025-03-31T15:42:08Z
body: Preview staging links for this PR:
- Docs site: https://eui.elastic.co/pr_8513/
- Storybook: https://eui.elastic.co/pr_8513/storybook
- New docs: https://eui.elastic.co/pr_8513/new-docs
author_association: NONE
user: login: elasticmachine
created_at: 2025-03-31T15:45:27Z
body: ## :green_heart: Build Succeeded
* [Buildkite Build](https://buildkite.com/elastic/eui-pull-request-test-and-deploy/builds/3748)
* Commit: 9d1de751be52e4a17533115f37dd16b7c3d6375d

### History
* :green_heart: [Build #3737](https://buildkite.com/elastic/eui-pull-request-test-and-deploy/builds/3737) succeeded 44c02edc67893373b3ed0fb487c661c3b957336e

cc @acstll

<!--buildkite-pr-comment-eui-pull-request-test-and-deploy
{"builds":[{"buildStatus":{"state":"passed","success":true,"hasRetries":false,"hasNonPreemptionRetries":false},"url":"https://buildkite.com/elastic/eui-pull-request-test-and-deploy/builds/3748","number":3748,"commit":"9d1de751be52e4a17533115f37dd16b7c3d6375d"},{"buildStatus":{"state":"passed","success":true,"hasRetries":false,"hasNonPreemptionRetries":false},"url":"https://buildkite.com/elastic/eui-pull-request-test-and-deploy/builds/3737","number":3737,"commit":"44c02edc67893373b3ed0fb487c661c3b957336e"}],"number":3748}
buildkite-pr-comment-->
author_association: COLLABORATOR
user: login: tkajtoch
created_at: 2025-03-31T16:10:02Z
body: The changes look great, thanks @acstll! 
author_association: MEMBER