try editor as preview

packages/design-system/atoms/breakpoints/BreakpointText.tsx

@@ -0,0 +1,26 @@
+import styled, { css } from 'styled-components';
+import { onSmallScreen } from './Breakpoints';
+
+const ShowOnSmall = styled.span`
+  display: none;
+  ${onSmallScreen(css`
+    display: initial;
+  `)}
+`;
+
+const ShowOnLarge = styled.span`
+  display: initial;
+  ${onSmallScreen(css`
+    display: none;
+  `)}
+`;
+
+export const BreakpointText = (props: { small: string; large: string }) => {
+  const { small, large } = props;
+  return (
+    <>
+      <ShowOnSmall>{small}</ShowOnSmall>
+      <ShowOnLarge>{large}</ShowOnLarge>
+    </>
+  );
+};

packages/design-system/atoms/breakpoints/index.ts

@@ -1,3 +1,4 @@
 export * from './BreakpointProvider';
 export * from './Breakpoints';
+export * from './BreakpointText';
 export * from './Context';

packages/design-system/atoms/button/Button.styled.ts

@@ -67,6 +67,13 @@ const colors = {
       background-color: ${palette.taupe200};
     }
   `,
+  silent: css`
+    background: none;
+    border-color: transparent;
+    :hover {
+      background-color: ${palette.taupe200};
+    }
+  `,
 };
 
 const sizes = {