diff --git a/src/lib/theme/type.tsx b/src/lib/theme/type.tsx
index a68427e0fe..05bd3b91b8 100644
--- a/src/lib/theme/type.tsx
+++ b/src/lib/theme/type.tsx
@@ -5,10 +5,11 @@ import { Color } from './theme'
 
 type TextProps = Omit<TextPropsWithCss, 'css' | 'color'> & { color?: Color }
 
-const TextWrapper = styled(Text)<{ color?: Color; lineHeight: string }>`
+const TextWrapper = styled(Text)<{ color?: Color; lineHeight: string; noWrap?: true }>`
   color: ${({ color = 'currentColor', theme }) => theme[color as Color]};
   // Avoid the need for placeholders by setting min-height to line-height.
   min-height: ${({ lineHeight }) => lineHeight};
+  white-space: ${({ noWrap }) => noWrap && 'nowrap'};
 `
 
 const TransitionTextWrapper = styled(TextWrapper)`
@@ -16,23 +17,33 @@ const TransitionTextWrapper = styled(TextWrapper)`
 `
 
 export function H1(props: TextProps) {
-  return <TextWrapper className="headline headline-1" fontSize={36} fontWeight={400} lineHeight="36px" {...props} />
+  return (
+    <TextWrapper className="headline headline-1" fontSize={36} fontWeight={400} lineHeight="36px" noWrap {...props} />
+  )
 }
 
 export function H2(props: TextProps) {
-  return <TextWrapper className="headline headline-2" fontSize={32} fontWeight={400} lineHeight="32px" {...props} />
+  return (
+    <TextWrapper className="headline headline-2" fontSize={32} fontWeight={400} lineHeight="32px" noWrap {...props} />
+  )
 }
 
 export function H3(props: TextProps) {
-  return <TextWrapper className="headline headline-3" fontSize={20} fontWeight={400} lineHeight="20px" {...props} />
+  return (
+    <TextWrapper className="headline headline-3" fontSize={20} fontWeight={400} lineHeight="20px" noWrap {...props} />
+  )
 }
 
 export function Subhead1(props: TextProps) {
-  return <TextWrapper className="subhead subhead-1" fontSize={16} fontWeight={500} lineHeight="16px" {...props} />
+  return (
+    <TextWrapper className="subhead subhead-1" fontSize={16} fontWeight={500} lineHeight="16px" noWrap {...props} />
+  )
 }
 
 export function Subhead2(props: TextProps) {
-  return <TextWrapper className="subhead subhead-2" fontSize={14} fontWeight={500} lineHeight="14px" {...props} />
+  return (
+    <TextWrapper className="subhead subhead-2" fontSize={14} fontWeight={500} lineHeight="14px" noWrap {...props} />
+  )
 }
 
 export function Body1(props: TextProps) {
@@ -48,19 +59,25 @@ export function Caption(props: TextProps) {
 }
 
 export function Badge(props: TextProps) {
-  return <TextWrapper className="badge" fontSize={8} fontWeight={600} lineHeight="8px" {...props} />
+  return <TextWrapper className="badge" fontSize={8} fontWeight={600} lineHeight="8px" noWrap />
 }
 
 export function ButtonLarge(props: TextProps) {
-  return <TextWrapper className="button button-large" fontSize={20} fontWeight={500} lineHeight="20px" {...props} />
+  return (
+    <TextWrapper className="button button-large" fontSize={20} fontWeight={500} lineHeight="20px" noWrap {...props} />
+  )
 }
 
 export function ButtonMedium(props: TextProps) {
-  return <TextWrapper className="button button-medium" fontSize={16} fontWeight={500} lineHeight="16px" {...props} />
+  return (
+    <TextWrapper className="button button-medium" fontSize={16} fontWeight={500} lineHeight="16px" noWrap {...props} />
+  )
 }
 
 export function ButtonSmall(props: TextProps) {
-  return <TextWrapper className="button button-small" fontSize={14} fontWeight={500} lineHeight="14px" {...props} />
+  return (
+    <TextWrapper className="button button-small" fontSize={14} fontWeight={500} lineHeight="14px" noWrap {...props} />
+  )
 }
 
 export function TransitionButton(props: TextProps & { buttonSize: 'small' | 'medium' | 'large' }) {
@@ -73,6 +90,7 @@ export function TransitionButton(props: TextProps & { buttonSize: 'small' | 'med
       fontSize={fontSize}
       fontWeight={500}
       lineHeight={lineHeight}
+      noWrap
       {...props}
     />
   )