diff --git a/packages/fuselage/src/components/States/States.stories.tsx b/packages/fuselage/src/components/States/States.stories.tsx
index 87fe9e3950..92e7c739af 100644
--- a/packages/fuselage/src/components/States/States.stories.tsx
+++ b/packages/fuselage/src/components/States/States.stories.tsx
@@ -11,6 +11,7 @@ import {
StatesSuggestionText,
StatesActions,
StatesAction,
+ StatesLink,
} from '.';
import { Box, Icon } from '..';
@@ -94,6 +95,25 @@ export const ActionButtonWithNoSuggestions = () => (
);
+export const Link = () => (
+
+
+
+ No app matches
+
+ No app matches for ”search term here” Try searching in the Marketplace
+ instead.
+
+
+ Reload
+
+
+ Link to another page
+
+
+
+);
+
export const Variations = () => (
diff --git a/packages/fuselage/src/components/States/States.styles.scss b/packages/fuselage/src/components/States/States.styles.scss
index 7fc654ed19..67b27494bd 100644
--- a/packages/fuselage/src/components/States/States.styles.scss
+++ b/packages/fuselage/src/components/States/States.styles.scss
@@ -93,4 +93,14 @@ $variants: (
}
}
}
+
+ &__link {
+ @include typography.use-font-scale(p2);
+ margin-block: lengths.margin(16);
+
+ text-decoration: none;
+
+ color: colors.font(info);
+ @extend %--with-inline-elements;
+ }
}
diff --git a/packages/fuselage/src/components/States/StatesLink.tsx b/packages/fuselage/src/components/States/StatesLink.tsx
new file mode 100644
index 0000000000..fa69a7a0e1
--- /dev/null
+++ b/packages/fuselage/src/components/States/StatesLink.tsx
@@ -0,0 +1,13 @@
+import type { AllHTMLAttributes, ComponentProps } from 'react';
+import React from 'react';
+
+import Box from '../Box/Box';
+
+type StatesLinkProps = ComponentProps &
+ AllHTMLAttributes;
+
+const StatesLink = (props: StatesLinkProps) => (
+
+);
+
+export default StatesLink;
diff --git a/packages/fuselage/src/components/States/index.tsx b/packages/fuselage/src/components/States/index.tsx
index ca8d58eddb..47d03ec212 100644
--- a/packages/fuselage/src/components/States/index.tsx
+++ b/packages/fuselage/src/components/States/index.tsx
@@ -2,6 +2,7 @@ import States from './States';
import StatesAction from './StatesAction';
import StatesActions from './StatesActions';
import StatesIcon from './StatesIcon';
+import StatesLink from './StatesLink';
import StatesSubtitle from './StatesSubtitle';
import StatesSuggestion from './StatesSuggestion';
import StatesSuggestionList from './StatesSuggestionList';
@@ -14,6 +15,7 @@ export {
StatesAction,
StatesActions,
StatesIcon,
+ StatesLink,
StatesSubtitle,
StatesSuggestion,
StatesSuggestionList,