diff --git a/static/app/components/emptyMessage.mdx b/static/app/components/emptyMessage.mdx
new file mode 100644
index 00000000000000..323b42c74b433e
--- /dev/null
+++ b/static/app/components/emptyMessage.mdx
@@ -0,0 +1,146 @@
+---
+title: EmptyMessage
+description: A component for displaying empty states with optional icon, title, description, and action buttons. All text content uses balanced text wrapping for better readability.
+source: 'sentry/components/emptyMessage'
+resources:
+ js: https://github.com/getsentry/sentry/blob/master/static/app/components/emptyMessage.tsx
+---
+
+import {Button} from 'sentry/components/core/button';
+import EmptyMessage from 'sentry/components/emptyMessage';
+import Panel from 'sentry/components/panels/panel';
+import {IconSearch} from 'sentry/icons';
+import * as Storybook from 'sentry/stories';
+
+To create a basic empty message, wrap your message in an `` component.
+
+```jsx
+
+
+ This is a simple empty message with default styling and balanced text wrapping for
+ better readability.
+
+
+```
+
+## Props
+
+- **title** (`React.ReactNode`) - The title of the empty message
+- **icon** (`React.ReactNode`) - Optional icon element
+- **action** (`React.ReactElement`) - Optional action button
+- **size** (`"md" | "lg"`) - Size of the text (default: md)
+- **children** (`React.ReactNode`) - Main content text (automatically uses balanced text wrapping)
+
+## Examples
+
+### With Title
+
+Add a title to provide context for the empty state.
+
+
+
+
+ We couldn't find any results matching your search criteria. Try adjusting your
+ filters or search terms.
+
+
+
+```jsx
+
+ We couldn't find any results matching your search criteria. Try adjusting your filters
+ or search terms.
+
+```
+
+### With Icon
+
+Add an icon to make the empty state more visually distinctive. Icons are defaulted to `lg` size, so there is typically no need to specify an icon size.
+
+
+
+ } title="No Results">
+ We couldn't find any results matching your search criteria.
+
+
+
+```jsx
+} title="No Results">
+ We couldn't find any results matching your search criteria.
+
+```
+
+### With Action
+
+Add action buttons to guide users toward resolving the empty state.
+
+
+
+ }
+ title="No Results Found"
+ action={}
+ >
+ We couldn't find any results matching your search criteria. Try adjusting your
+ filters or search terms.
+
+
+
+```jsx
+}
+ title="No Results Found"
+ action={}
+>
+ We couldn't find any results matching your search criteria. Try adjusting your filters
+ or search terms.
+
+```
+
+### Sizes
+
+EmptyMessage supports two sizes: `md` (default) and `lg`.
+
+
+
+
+ } title="Medium Size">
+ This is the default medium size empty message.
+
+
+
+ } title="Large Size">
+ This is a large size empty message with bigger text.
+
+
+
+
+```jsx
+} title="Medium Size">
+ This is the default medium size empty message.
+
+
+} title="Large Size">
+ This is a large size empty message with bigger text.
+
+```
+
+### Text Wrapping
+
+All text content automatically uses CSS text-wrap balance mode for better readability, especially with longer messages.
+
+
+
+ } title="Text Wrapping">
+ Sure you haven't misspelled? If you're using a lesser-known platform, consider
+ choosing a more generic SDK like Browser JavaScript, Python, Node, .NET & Java or
+ create a generic project.
+
+
+
+```jsx
+} title="Text Wrapping">
+ Sure you haven't misspelled? If you're using a lesser-known platform, consider choosing
+ a more generic SDK like Browser JavaScript, Python, Node, .NET & Java or create a
+ generic project.
+
+```
diff --git a/static/app/components/emptyMessage.tsx b/static/app/components/emptyMessage.tsx
index dbe097fc2d5344..9d4221048bca0f 100644
--- a/static/app/components/emptyMessage.tsx
+++ b/static/app/components/emptyMessage.tsx
@@ -1,74 +1,51 @@
-import {css} from '@emotion/react';
-import styled from '@emotion/styled';
+import {useTheme} from '@emotion/react';
+import {mergeProps} from '@react-aria/utils';
-import {space} from 'sentry/styles/space';
-import TextBlock from 'sentry/views/settings/components/text/textBlock';
+import {Container, Flex} from 'sentry/components/core/layout';
+import {Text} from 'sentry/components/core/text';
+import {IconDefaultsProvider} from 'sentry/icons/useIconDefaults';
interface Props extends Omit, 'title'> {
- action?: React.ReactElement;
- description?: React.ReactNode;
+ action?: React.ReactNode;
icon?: React.ReactNode;
- leftAligned?: boolean;
- size?: 'large' | 'medium';
+ size?: 'lg' | 'md';
title?: React.ReactNode;
}
-type WrapperProps = Pick;
-
-const EmptyMessage = styled(
- ({
- title,
- description,
- icon,
- children,
- action,
- leftAligned: _leftAligned,
- ...props
- }: Props) => (
-