diff --git a/packages/grafana-ui/src/components/EmptyState/EmptyState.mdx b/packages/grafana-ui/src/components/EmptyState/EmptyState.mdx
index ed1e0863f70..1851d7c91c2 100644
--- a/packages/grafana-ui/src/components/EmptyState/EmptyState.mdx
+++ b/packages/grafana-ui/src/components/EmptyState/EmptyState.mdx
@@ -66,6 +66,16 @@ import { EmptyState } from '@grafana/ui';
;
```
+### `variant="completed"`
+
+For when a user has completed all tasks on a page, such as reading all their notifications.
+
+```jsx
+import { EmptyState } from '@grafana/ui';
+
+;
+```
+
## Customization
For all variants you can:
diff --git a/packages/grafana-ui/src/components/EmptyState/EmptyState.tsx b/packages/grafana-ui/src/components/EmptyState/EmptyState.tsx
index 97340c52c41..548a1a66477 100644
--- a/packages/grafana-ui/src/components/EmptyState/EmptyState.tsx
+++ b/packages/grafana-ui/src/components/EmptyState/EmptyState.tsx
@@ -1,4 +1,5 @@
import React, { ReactNode } from 'react';
+import SVG from 'react-inlinesvg';
import { Box } from '../Layout/Box/Box';
import { Stack } from '../Layout/Stack/Stack';
@@ -6,6 +7,7 @@ import { Text } from '../Text/Text';
import { GrotCTA } from './GrotCTA/GrotCTA';
import { GrotNotFound } from './GrotNotFound/GrotNotFound';
+import GrotCompleted from './grot-completed.svg';
interface Props {
/**
@@ -24,7 +26,7 @@ interface Props {
/**
* Which variant to use. Affects the default image shown.
*/
- variant: 'call-to-action' | 'not-found';
+ variant: 'call-to-action' | 'not-found' | 'completed';
}
export const EmptyState = ({
@@ -41,8 +43,14 @@ export const EmptyState = ({
{!hideImage && imageToShow}
- {message}
- {children && {children}}
+
+ {message}
+
+ {children && (
+
+ {children}
+
+ )}
{button}
@@ -57,6 +65,9 @@ function getDefaultImageForVariant(variant: Props['variant']) {
case 'not-found': {
return ;
}
+ case 'completed': {
+ return ;
+ }
default: {
throw new Error(`Unknown variant: ${variant}`);
}
diff --git a/packages/grafana-ui/src/components/EmptyState/grot-completed.svg b/packages/grafana-ui/src/components/EmptyState/grot-completed.svg
new file mode 100644
index 00000000000..2205faa698d
--- /dev/null
+++ b/packages/grafana-ui/src/components/EmptyState/grot-completed.svg
@@ -0,0 +1,91 @@
+