diff --git a/CHANGELOG.md b/CHANGELOG.md
index d3aca0150c..e8bf47d465 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,10 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Replaced Header `subheader` with `description` and fixed it to render well-formed HTML @mnajdova ([#17](https://github.com/stardust-ui/react/pull/17))
 
+### Features
+- Add Icon `xSpacing` prop @Bugaa92 ([#22](https://github.com/stardust-ui/react/pull/22))
+- Add Button `icon` prop and Text `truncated` prop @Bugaa92 ([#13](https://github.com/stardust-ui/react/pull/13))
+
 <!--------------------------------[ v0.2.3 ]------------------------------- -->
 ## [v0.2.3](https://github.com/stardust-ui/react/tree/v0.2.3) (2018-07-24)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.2.2...v0.2.3)
@@ -33,7 +37,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Features
 - Add Button `fluid` prop @Bugaa92 ([#6](https://github.com/stardust-ui/react/pull/6))
 - Add Icon `disabled` prop @Bugaa92 ([#12](https://github.com/stardust-ui/react/pull/12))
-- Add Icon `xSpacing` prop @Bugaa92 ([#22](https://github.com/stardust-ui/react/pull/22))
 
 <!--------------------------------[ v0.2.2 ]------------------------------- -->
 ## [v0.2.2](https://github.com/stardust-ui/react/tree/v0.2.2) (2018-07-24)
diff --git a/docs/src/examples/components/Button/Types/ButtonExample.shorthand.tsx b/docs/src/examples/components/Button/Types/ButtonExample.shorthand.tsx
index 4ed08727f6..04e23fffb8 100644
--- a/docs/src/examples/components/Button/Types/ButtonExample.shorthand.tsx
+++ b/docs/src/examples/components/Button/Types/ButtonExample.shorthand.tsx
@@ -1,6 +1,11 @@
 import React from 'react'
 import { Button } from '@stardust-ui/react'
 
-const ButtonExample = () => <Button content="Click here" />
+const ButtonExample = () => (
+  <div>
+    <Button content="Click here" />
+    <Button content="See how this very long text shows up on the button" />
+  </div>
+)
 
 export default ButtonExample
diff --git a/docs/src/examples/components/Button/Types/ButtonExample.tsx b/docs/src/examples/components/Button/Types/ButtonExample.tsx
index 2ca11568f5..a76f79e67f 100644
--- a/docs/src/examples/components/Button/Types/ButtonExample.tsx
+++ b/docs/src/examples/components/Button/Types/ButtonExample.tsx
@@ -1,6 +1,11 @@
 import React from 'react'
 import { Button } from '@stardust-ui/react'
 
-const ButtonExample = () => <Button>Click here</Button>
+const ButtonExample = () => (
+  <div>
+    <Button>Click here</Button>
+    <Button>See how this very long text shows up on the button</Button>
+  </div>
+)
 
 export default ButtonExample
diff --git a/docs/src/examples/components/Button/Types/ButtonExampleContentAndIcon.shorthand.tsx b/docs/src/examples/components/Button/Types/ButtonExampleContentAndIcon.shorthand.tsx
new file mode 100644
index 0000000000..cc23982083
--- /dev/null
+++ b/docs/src/examples/components/Button/Types/ButtonExampleContentAndIcon.shorthand.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Button } from '@stardust-ui/react'
+
+const ButtonExampleContentAndIcon = () => (
+  <div>
+    <Button type="primary" icon="book" content="Click me before" iconPosition="before" />
+    <Button type="secondary" icon="coffee" content="Click me after" iconPosition="after" />
+  </div>
+)
+
+export default ButtonExampleContentAndIcon
diff --git a/docs/src/examples/components/Button/Types/ButtonExampleContentAndIcon.tsx b/docs/src/examples/components/Button/Types/ButtonExampleContentAndIcon.tsx
new file mode 100644
index 0000000000..ea47e2af16
--- /dev/null
+++ b/docs/src/examples/components/Button/Types/ButtonExampleContentAndIcon.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { Button, Icon, Text } from '@stardust-ui/react'
+
+const ButtonExampleContentAndIcon = () => (
+  <div>
+    <Button type="primary" icon iconPosition="before">
+      <Icon name="book" color="white" xSpacing="after" />
+      <Text content="Click me before" />
+    </Button>
+    <Button type="secondary" icon iconPosition="after">
+      <Text content="Click me after" />
+      <Icon name="coffee" xSpacing="before" />
+    </Button>
+  </div>
+)
+
+export default ButtonExampleContentAndIcon
diff --git a/docs/src/examples/components/Button/Types/ButtonExampleEmphasis.shorthand.tsx b/docs/src/examples/components/Button/Types/ButtonExampleEmphasis.shorthand.tsx
new file mode 100644
index 0000000000..07c60bcf41
--- /dev/null
+++ b/docs/src/examples/components/Button/Types/ButtonExampleEmphasis.shorthand.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Button } from '@stardust-ui/react'
+
+const ButtonExampleEmphasis = () => (
+  <div>
+    <Button type="primary" content="Primary" />
+    <Button type="secondary" content="Secondary" />
+  </div>
+)
+
+export default ButtonExampleEmphasis
diff --git a/docs/src/examples/components/Button/Types/ButtonExampleIcon.shorthand.tsx b/docs/src/examples/components/Button/Types/ButtonExampleIcon.shorthand.tsx
new file mode 100644
index 0000000000..4f5c334d77
--- /dev/null
+++ b/docs/src/examples/components/Button/Types/ButtonExampleIcon.shorthand.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import { Button } from '@stardust-ui/react'
+
+const ButtonExampleIcon = () => <Button type="primary" icon="book" />
+
+export default ButtonExampleIcon
diff --git a/docs/src/examples/components/Button/Types/ButtonExampleIcon.tsx b/docs/src/examples/components/Button/Types/ButtonExampleIcon.tsx
new file mode 100644
index 0000000000..39d26ceae1
--- /dev/null
+++ b/docs/src/examples/components/Button/Types/ButtonExampleIcon.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import { Button, Icon } from '@stardust-ui/react'
+
+const ButtonExampleIcon = () => (
+  <Button type="primary" icon>
+    <Icon name="book" color="white" xSpacing="none" />
+  </Button>
+)
+
+export default ButtonExampleIcon
diff --git a/docs/src/examples/components/Button/Types/index.tsx b/docs/src/examples/components/Button/Types/index.tsx
index 55ad3a8aee..0cd95dc370 100644
--- a/docs/src/examples/components/Button/Types/index.tsx
+++ b/docs/src/examples/components/Button/Types/index.tsx
@@ -6,7 +6,7 @@ const Types = () => (
   <ExampleSection title="Types">
     <ComponentExample
       title="Default"
-      description="A default Button."
+      description="A default button."
       examplePath="components/Button/Types/ButtonExample"
     />
     <ComponentExample
@@ -14,6 +14,16 @@ const Types = () => (
       description="A button can be formatted to show different levels of emphasis."
       examplePath="components/Button/Types/ButtonExampleEmphasis"
     />
+    <ComponentExample
+      title="Icon"
+      description="A button can be made of only an icon."
+      examplePath="components/Button/Types/ButtonExampleIcon"
+    />
+    <ComponentExample
+      title="Content and Icon"
+      description="A button can have an icon in addition to content."
+      examplePath="components/Button/Types/ButtonExampleContentAndIcon"
+    />
   </ExampleSection>
 )
 
diff --git a/docs/src/examples/components/Button/Variations/ButtonExampleCircular.shorthand.tsx b/docs/src/examples/components/Button/Variations/ButtonExampleCircular.shorthand.tsx
index ee91511e54..17207451ab 100644
--- a/docs/src/examples/components/Button/Variations/ButtonExampleCircular.shorthand.tsx
+++ b/docs/src/examples/components/Button/Variations/ButtonExampleCircular.shorthand.tsx
@@ -1,6 +1,10 @@
 import React from 'react'
 import { Button } from '@stardust-ui/react'
 
-const ButtonExampleCircular = () => <Button circular content="C" />
-
+const ButtonExampleCircular = () => (
+  <div>
+    <Button circular content="C" />
+    <Button circular icon="book" />
+  </div>
+)
 export default ButtonExampleCircular
diff --git a/docs/src/examples/components/Button/Variations/ButtonExampleCircular.tsx b/docs/src/examples/components/Button/Variations/ButtonExampleCircular.tsx
index 2d1db0179b..1b0da5d5a1 100644
--- a/docs/src/examples/components/Button/Variations/ButtonExampleCircular.tsx
+++ b/docs/src/examples/components/Button/Variations/ButtonExampleCircular.tsx
@@ -1,6 +1,13 @@
 import React from 'react'
-import { Button } from '@stardust-ui/react'
+import { Button, Icon } from '@stardust-ui/react'
 
-const ButtonExampleCircular = () => <Button circular>C</Button>
+const ButtonExampleCircular = () => (
+  <div>
+    <Button circular>C</Button>
+    <Button circular icon>
+      <Icon name="book" xSpacing="none" />
+    </Button>
+  </div>
+)
 
 export default ButtonExampleCircular
diff --git a/docs/src/examples/components/Button/Variations/ButtonExampleEmphasisCircular.shorthand.tsx b/docs/src/examples/components/Button/Variations/ButtonExampleEmphasisCircular.shorthand.tsx
new file mode 100644
index 0000000000..a30662a15f
--- /dev/null
+++ b/docs/src/examples/components/Button/Variations/ButtonExampleEmphasisCircular.shorthand.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Button } from '@stardust-ui/react'
+
+const ButtonExampleEmphasisCircular = () => (
+  <div>
+    <Button type="primary" circular icon="coffee" />
+    <Button type="secondary" circular icon="book" />
+  </div>
+)
+
+export default ButtonExampleEmphasisCircular
diff --git a/docs/src/examples/components/Button/Variations/ButtonExampleEmphasisCircular.tsx b/docs/src/examples/components/Button/Variations/ButtonExampleEmphasisCircular.tsx
index d10faef454..c0fed84c24 100644
--- a/docs/src/examples/components/Button/Variations/ButtonExampleEmphasisCircular.tsx
+++ b/docs/src/examples/components/Button/Variations/ButtonExampleEmphasisCircular.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
-import { Button } from '@stardust-ui/react'
+import { Button, Icon } from '@stardust-ui/react'
 
 const ButtonExampleEmphasisCircular = () => (
   <div>
-    <Button type="primary" circular>
-      P
+    <Button type="primary" circular icon>
+      <Icon name="coffee" color="white" xSpacing="none" />
     </Button>
-    <Button type="secondary" circular>
-      S
+    <Button type="secondary" circular icon>
+      <Icon name="book" xSpacing="none" />
     </Button>
   </div>
 )
diff --git a/docs/src/examples/components/Icon/Variations/IconExampleSpace.shorthand.tsx b/docs/src/examples/components/Icon/Variations/IconExampleSpace.shorthand.tsx
index 376ed95544..febdddfe23 100644
--- a/docs/src/examples/components/Icon/Variations/IconExampleSpace.shorthand.tsx
+++ b/docs/src/examples/components/Icon/Variations/IconExampleSpace.shorthand.tsx
@@ -10,7 +10,7 @@ const IconExampleSpace = () => (
     <Label content="Before" />
     <Icon xSpacing="before" name="help" />
     <Label content="After" />
-    <Icon xSpacing="before" name="help" />
+    <Icon xSpacing="after" name="help" />
     <Label content="Both" />
     <Icon xSpacing="both" name="help" />
     <Label content="End" />
diff --git a/docs/src/examples/components/Text/States/TextExampleTruncated.shorthand.tsx b/docs/src/examples/components/Text/States/TextExampleTruncated.shorthand.tsx
new file mode 100644
index 0000000000..8def2dcfa9
--- /dev/null
+++ b/docs/src/examples/components/Text/States/TextExampleTruncated.shorthand.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { Text } from '@stardust-ui/react'
+
+const [notTruncatedText, truncatedText] = [
+  'Some long text here to see how it looks when not truncated',
+  'Some long text here to see how it looks truncated',
+].map(text =>
+  Array(5)
+    .fill(text)
+    .join('. '),
+)
+
+const TextExampleTruncated = () => (
+  <div style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
+    <Text content={notTruncatedText} />
+    <br />
+    <br />
+    <Text truncated content={truncatedText} />
+  </div>
+)
+
+export default TextExampleTruncated
diff --git a/docs/src/examples/components/Text/States/TextExampleTruncated.tsx b/docs/src/examples/components/Text/States/TextExampleTruncated.tsx
new file mode 100644
index 0000000000..dbb858d4b5
--- /dev/null
+++ b/docs/src/examples/components/Text/States/TextExampleTruncated.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { Text } from '@stardust-ui/react'
+
+const [notTruncatedText, truncatedText] = [
+  'Some long text here to see how it looks when not truncated',
+  'Some long text here to see how it looks truncated',
+].map(text =>
+  Array(5)
+    .fill(text)
+    .join('. '),
+)
+
+const TextExampleTruncated = () => (
+  <div style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
+    <Text>{notTruncatedText}</Text>
+    <br />
+    <br />
+    <Text truncated>{truncatedText}</Text>
+  </div>
+)
+
+export default TextExampleTruncated
diff --git a/docs/src/examples/components/Text/States/index.tsx b/docs/src/examples/components/Text/States/index.tsx
index 86f0664001..52ba915fa8 100644
--- a/docs/src/examples/components/Text/States/index.tsx
+++ b/docs/src/examples/components/Text/States/index.tsx
@@ -19,6 +19,11 @@ const States = () => (
       description="The success state for a Text component"
       examplePath="components/Text/States/TextExampleSuccess"
     />
+    <ComponentExample
+      title="Truncated"
+      description="Truncated text in a Text component"
+      examplePath="components/Text/States/TextExampleTruncated"
+    />
   </ExampleSection>
 )
 
diff --git a/docs/src/examples/components/Text/Types/TextSizesExample.tsx b/docs/src/examples/components/Text/Types/TextSizesExample.tsx
index c769192593..4166a684ad 100644
--- a/docs/src/examples/components/Text/Types/TextSizesExample.tsx
+++ b/docs/src/examples/components/Text/Types/TextSizesExample.tsx
@@ -1,15 +1,32 @@
 import React from 'react'
 import { Text } from '@stardust-ui/react'
 
-const sizes = ['xs', 'sm', 'md', 'lg', 'xl', '2x', '3x', '4x']
-
 const TextSizesExample = () => (
   <div>
-    {sizes.map(value => (
-      <div>
-        <Text size={value}>Dicta voluptatum dolorem.</Text>
-      </div>
-    ))}
+    <div>
+      <Text size="xs">Dicta voluptatum dolorem.</Text>
+    </div>
+    <div>
+      <Text size="sm">Dicta voluptatum dolorem.</Text>
+    </div>
+    <div>
+      <Text size="md">Dicta voluptatum dolorem.</Text>
+    </div>
+    <div>
+      <Text size="lg">Dicta voluptatum dolorem.</Text>
+    </div>
+    <div>
+      <Text size="xl">Dicta voluptatum dolorem.</Text>
+    </div>
+    <div>
+      <Text size="2x">Dicta voluptatum dolorem.</Text>
+    </div>
+    <div>
+      <Text size="3x">Dicta voluptatum dolorem.</Text>
+    </div>
+    <div>
+      <Text size="4x">Dicta voluptatum dolorem.</Text>
+    </div>
   </div>
 )
 export default TextSizesExample
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 34c470c9b7..62453edc07 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -4,7 +4,10 @@ import React, { ReactNode, CSSProperties } from 'react'
 import { UIComponent, childrenExist, customPropTypes, IRenderResultConfig } from '../../lib'
 import buttonRules from './buttonRules'
 import buttonVariables from './buttonVariables'
+import Icon from '../Icon'
+import Text from '../Text'
 
+export type IconPosition = 'before' | 'after'
 export type ButtonType = 'primary' | 'secondary'
 
 export interface IButtonProps {
@@ -14,6 +17,8 @@ export interface IButtonProps {
   className?: string
   content?: ReactNode
   fluid?: boolean
+  icon?: boolean | string
+  iconPosition?: IconPosition
   style?: CSSProperties
   type?: ButtonType
 }
@@ -51,6 +56,12 @@ class Button extends UIComponent<IButtonProps, any> {
     /** A button can take the width of its container. */
     fluid: PropTypes.bool,
 
+    /** Button can have an icon. */
+    icon: customPropTypes.some([PropTypes.bool, PropTypes.string]),
+
+    /** An icon button can format an Icon to appear before or after the button */
+    iconPosition: PropTypes.oneOf(['before', 'after']),
+
     /** A button can be formatted to show different levels of emphasis. */
     type: PropTypes.oneOf(['primary', 'secondary']),
   }
@@ -62,6 +73,8 @@ class Button extends UIComponent<IButtonProps, any> {
     'className',
     'content',
     'fluid',
+    'icon',
+    'iconPosition',
     'type',
   ]
 
@@ -74,11 +87,34 @@ class Button extends UIComponent<IButtonProps, any> {
     classes,
     rest,
   }: IRenderResultConfig<IButtonProps>): ReactNode {
-    const { children, content } = this.props
+    const { children, content, icon, iconPosition, type } = this.props
+    const primary = type === 'primary'
+
+    const getContent = (): ReactNode => {
+      if (childrenExist(children)) {
+        return children
+      }
+
+      const iconIsAfterButton = iconPosition === 'after'
+      const renderedContent = [
+        content && <Text key="btn-content" truncated content={content} />,
+        icon &&
+          typeof icon === 'string' && (
+            <Icon
+              key="btn-icon"
+              name={icon}
+              xSpacing={!content ? 'none' : iconIsAfterButton ? 'before' : 'after'}
+              color={primary ? 'white' : 'black'}
+            />
+          ),
+      ].filter(Boolean)
+
+      return iconIsAfterButton ? renderedContent : renderedContent.reverse()
+    }
 
     return (
       <ElementType {...rest} className={classes.root}>
-        {childrenExist(children) ? children : content}
+        {getContent()}
       </ElementType>
     )
   }
diff --git a/src/components/Button/buttonRules.ts b/src/components/Button/buttonRules.ts
index 268bdb2fca..b990aba4c3 100644
--- a/src/components/Button/buttonRules.ts
+++ b/src/components/Button/buttonRules.ts
@@ -1,18 +1,22 @@
 import { pxToRem } from '../../lib'
+import { truncateStyle } from '../../styles/customCSS'
 import { IButtonVariables } from './buttonVariables'
 import { IButtonProps } from './Button'
 
 export default {
   root: ({ props, variables }: { props: IButtonProps; variables: IButtonVariables }) => {
-    const { children, circular, content, fluid, type } = props
+    const { circular, fluid, icon, iconPosition, type } = props
     const primary = type === 'primary'
     const secondary = type === 'secondary'
 
     const {
+      height,
+      minWidth,
+      maxWidth,
       backgroundColor,
       backgroundColorHover,
       circularRadius,
-      circularWidth,
+      paddingLeftRightValue,
       typePrimaryColor,
       typePrimaryBackgroundColor,
       typePrimaryBackgroundColorHover,
@@ -21,26 +25,50 @@ export default {
       typeSecondaryBackgroundColor,
       typeSecondaryBackgroundColorHover,
       typeSecondaryBorderColor,
-    }: IButtonVariables = variables
+    } = variables
 
     return {
+      height,
+      minWidth,
+      maxWidth,
       backgroundColor,
       display: 'inline-block',
+      position: 'relative',
+      padding: `0 ${pxToRem(paddingLeftRightValue)}`,
       margin: `0 ${pxToRem(8)} 0 0`,
-      height: pxToRem(32),
-      width: pxToRem(96),
       verticalAlign: 'middle',
       cursor: 'pointer',
-      borderWidth: 0,
-      borderRadius: pxToRem(4),
+      borderWidth: `${secondary ? (circular ? 1 : 2) : 0}px`,
+      borderRadius: pxToRem(2),
       ':hover': {
         backgroundColor: backgroundColorHover,
       },
-      ...(circular && { borderRadius: circularRadius, width: circularWidth }),
 
-      ...(fluid && { display: 'block', width: '100%' }),
+      ...truncateStyle,
 
-      ...(type === 'primary' && {
+      ...(icon &&
+        (iconPosition
+          ? {
+              display: 'inline-flex',
+              justifyContent: 'center',
+            }
+          : {
+              minWidth: height,
+              padding: 0,
+            })),
+
+      ...(circular && {
+        minWidth: height,
+        padding: 0,
+        borderRadius: circularRadius,
+      }),
+
+      ...(fluid && {
+        width: '100%',
+        maxWidth: '100%',
+      }),
+
+      ...(primary && {
         color: typePrimaryColor,
         backgroundColor: typePrimaryBackgroundColor,
         borderColor: typePrimaryBorderColor,
@@ -49,11 +77,10 @@ export default {
         },
       }),
 
-      ...(type === 'secondary' && {
+      ...(secondary && {
         color: typeSecondaryColor,
         backgroundColor: typeSecondaryBackgroundColor,
         borderColor: typeSecondaryBorderColor,
-        borderWidth: '2px',
         ':hover': {
           borderColor: 'transparent',
           backgroundColor: typeSecondaryBackgroundColorHover,
diff --git a/src/components/Button/buttonVariables.ts b/src/components/Button/buttonVariables.ts
index 39c76404bf..a8894a4031 100644
--- a/src/components/Button/buttonVariables.ts
+++ b/src/components/Button/buttonVariables.ts
@@ -1,10 +1,13 @@
 import { pxToRem } from '../../lib'
 
 export interface IButtonVariables {
+  height: string
+  minWidth: string
+  maxWidth: string
   backgroundColor: string
   backgroundColorHover: string
   circularRadius: string
-  circularWidth: string
+  paddingLeftRightValue: number
   typePrimaryColor: string
   typePrimaryBackgroundColor: string
   typePrimaryBackgroundColorHover: string
@@ -17,10 +20,13 @@ export interface IButtonVariables {
 
 export default (siteVars: any): IButtonVariables => {
   return {
+    height: pxToRem(32),
+    minWidth: pxToRem(96),
+    maxWidth: pxToRem(280),
     backgroundColor: siteVars.gray08,
     backgroundColorHover: siteVars.gray06,
+    paddingLeftRightValue: 20,
     circularRadius: pxToRem(999),
-    circularWidth: '32px',
     typePrimaryColor: siteVars.white,
     typePrimaryBackgroundColor: siteVars.brand,
     typePrimaryBackgroundColorHover: siteVars.brand04,
diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
index cc69f5b39c..69523e90f4 100644
--- a/src/components/Text/Text.tsx
+++ b/src/components/Text/Text.tsx
@@ -1,14 +1,30 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { ReactNode } from 'react'
 
-import { childrenExist, customPropTypes, UIComponent } from '../../lib'
+import { childrenExist, customPropTypes, UIComponent, IRenderResultConfig } from '../../lib'
 import textRules from './textRules'
 import textVariables from './textVariables'
 
+export type ITextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2x' | '3x' | '4x'
+
+export interface ITextProps {
+  as?: string
+  atMention?: boolean
+  className?: string
+  content?: ReactNode
+  disabled?: boolean
+  error?: boolean
+  size?: ITextSize
+  important?: boolean
+  success?: boolean
+  timestamp?: boolean
+  truncated?: boolean
+}
+
 /**
  * A component containing text
  */
-class Text extends UIComponent<any, any> {
+class Text extends UIComponent<ITextProps, {}> {
   static className = 'ui-text'
 
   static propTypes = {
@@ -41,6 +57,9 @@ class Text extends UIComponent<any, any> {
 
     /** Set as timestamp Text component */
     timestamp: PropTypes.bool,
+
+    /** Truncates text as needed */
+    truncated: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -58,13 +77,14 @@ class Text extends UIComponent<any, any> {
     'important',
     'success',
     'timestamp',
+    'truncated',
   ]
 
   static rules = textRules
 
   static variables = textVariables
 
-  renderComponent({ ElementType, classes, rest }) {
+  renderComponent({ ElementType, classes, rest }: IRenderResultConfig<ITextProps>): ReactNode {
     const { children, content } = this.props
     return (
       <ElementType {...rest} className={classes.root}>
diff --git a/src/components/Text/textRules.ts b/src/components/Text/textRules.ts
index 2ad205d8e0..6f4f44aae7 100644
--- a/src/components/Text/textRules.ts
+++ b/src/components/Text/textRules.ts
@@ -23,44 +23,56 @@ import {
 } from '../../themes/teams/siteVariables'
 
 import { Sizes } from '../../lib/enums'
+import { truncateStyle } from '../../styles/customCSS'
+import { ITextVariables } from './textVariables'
+import { ITextProps } from './Text'
+
+interface TextRulesParams {
+  props: ITextProps
+  variables: ITextVariables
+}
 
 export default {
-  root: ({ props, variables: v }) => ({
-    ...(props.atMention && { color: atMentionTextColor }),
-    ...(props.disabled && { color: disabledTextColor }),
-    ...(props.error && { color: errorTextColor }),
-    ...(props.success && { color: successTextColor }),
-    ...(props.timestamp && { color: timestampTextColor }),
-    ...(props.important && { fontWeight: v.importantWeight }),
-    ...(props.size === Sizes.ExtraSmall && {
+  root: ({
+    props: { atMention, disabled, error, size, important, success, timestamp, truncated },
+    variables: v,
+  }: TextRulesParams) => ({
+    ...(truncated && truncateStyle),
+    ...(atMention && { color: atMentionTextColor }),
+    ...(disabled && { color: disabledTextColor }),
+    ...(error && { color: errorTextColor }),
+    ...(success && { color: successTextColor }),
+    ...(timestamp && { color: timestampTextColor }),
+    ...(important && { fontWeight: v.importantWeight }),
+    ...(size === Sizes.ExtraSmall && {
       fontSize: textExtraSmallFontSize,
       lineHeight: textExtraSmallLineHeight,
     }),
-    ...(props.size === Sizes.Small && {
+    ...(size === Sizes.Small && {
       fontSize: textSmallFontSize,
       lineHeight: textSmallLineHeight,
     }),
-    ...(props.size === Sizes.Medium && {
+    ...(size === Sizes.Medium && {
       fontSize: textMediumFontSize,
       lineHeight: textMediumLineHeight,
     }),
-    ...(props.size === Sizes.Large && {
+    ...(size === Sizes.Large && {
       fontSize: textLargeFontSize,
       lineHeight: textLargeLineHeight,
     }),
-    ...(props.size === Sizes.ExtraLarge && {
+    ...(size === Sizes.ExtraLarge && {
       fontSize: textExtraLargeFontSize,
       lineHeight: textExtraLargeLineHeight,
     }),
-    ...(props.size === Sizes['2x'] && {
+    ...(size === Sizes['2x'] && {
       fontSize: textX2FontSize,
       lineHeight: textX2LineHeight,
     }),
-    ...(props.size === Sizes['3x'] && {
+    ...(size === Sizes['3x'] && {
       fontSize: textX3FontSize,
       lineHeight: textX3LineHeight,
     }),
-    ...(props.size === Sizes['4x'] && {
+    ...(size === Sizes['4x'] && {
       fontSize: textX4FontSize,
       lineHeight: textX4LineHeight,
     }),
diff --git a/src/components/Text/textVariables.ts b/src/components/Text/textVariables.ts
index 689f630ae2..69c3884fff 100644
--- a/src/components/Text/textVariables.ts
+++ b/src/components/Text/textVariables.ts
@@ -2,7 +2,7 @@ export interface ITextVariables {
   importantWeight: number
 }
 
-export default (siteVars: any): ITextVariables => {
+export default (): ITextVariables => {
   return {
     importantWeight: 600,
   }