EmptyMessage - Sentry

import {Button} from '@sentry/scraps/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 <EmptyMessage> component.

jsx

<Panel>
  <EmptyMessage>
    This is a simple empty message with default styling and balanced text wrapping for
    better readability.
  </EmptyMessage>
</Panel>

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.

<Storybook.Demo> <Panel> <EmptyMessage title="No Results Found"> We couldn't find any results matching your search criteria. Try adjusting your filters or search terms. </EmptyMessage> </Panel> </Storybook.Demo>

jsx

<EmptyMessage title="No Results Found">
  We couldn't find any results matching your search criteria. Try adjusting your filters
  or search terms.
</EmptyMessage>

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.

<Storybook.Demo> <Panel> <EmptyMessage icon={<IconSearch />} title="No Results"> We couldn't find any results matching your search criteria. </EmptyMessage> </Panel> </Storybook.Demo>

jsx

<EmptyMessage icon={<IconSearch />} title="No Results">
  We couldn't find any results matching your search criteria.
</EmptyMessage>

With Action

Add action buttons to guide users toward resolving the empty state.

<Storybook.Demo> <Panel> <EmptyMessage icon={<IconSearch />} title="No Results Found" action={<Button variant="primary">Clear Filters</Button>} > We couldn't find any results matching your search criteria. Try adjusting your filters or search terms. </EmptyMessage> </Panel> </Storybook.Demo>

jsx

<EmptyMessage
  icon={<IconSearch />}
  title="No Results Found"
  action={<Button variant="primary">Clear Filters</Button>}
>
  We couldn't find any results matching your search criteria. Try adjusting your filters
  or search terms.
</EmptyMessage>

Sizes

EmptyMessage supports two sizes: md (default) and lg.

<Storybook.Demo>

<div style={{display: 'flex', gap: '1rem'}}> <Panel style={{flex: 1}}> <EmptyMessage icon={<IconSearch />} title="Medium Size"> This is the default medium size empty message. </EmptyMessage> </Panel> <Panel style={{flex: 1}}> <EmptyMessage size="lg" icon={<IconSearch />} title="Large Size"> This is a large size empty message with bigger text. </EmptyMessage> </Panel> </div> </Storybook.Demo> ```jsx <EmptyMessage size="medium" icon={<IconSearch />} title="Medium Size"> This is the default medium size empty message. </EmptyMessage>

<EmptyMessage size="lg" icon={<IconSearch />} title="Large Size"> This is a large size empty message with bigger text. </EmptyMessage>


### Text Wrapping

All text content automatically uses CSS text-wrap balance mode for better readability, especially with longer messages.

<Storybook.Demo>
  <Panel>
    <EmptyMessage icon={<IconSearch />} 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.
    </EmptyMessage>
  </Panel>
</Storybook.Demo>
```jsx
<EmptyMessage icon={<IconSearch />} 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.
</EmptyMessage>