diff --git a/CHANGELOG.md b/CHANGELOG.md
index e17033c190..b2f3e36ffd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,6 +30,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add and export 'missed call' icon in Teams theme @codepretty ([#748](https://github.com/stardust-ui/react/pull/748))
 - Add `Indicator` component and used it in `MenuItem` and `AccordionTitle` @mnajdova ([#721](https://github.com/stardust-ui/react/pull/721))
 - Expose `renderItem` and `renderSelectedItem` callbacks API for `Dropdown` @layershifter ([#746](https://github.com/stardust-ui/react/pull/746))
+- Add RTL support for the strings used inside the components @mnajdova ([#704](https://github.com/stardust-ui/react/pull/704))
 
 ### Documentation
 - Refine Shorthand docs page content @kuzhelov ([#751](https://github.com/stardust-ui/react/pull/751))
diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index 6d095007fc..b46284b334 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -9,6 +9,7 @@ import {
   UIComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
+  rtlTextContainer,
 } from '../../lib'
 import AccordionTitle from './AccordionTitle'
 import AccordionContent from './AccordionContent'
@@ -180,7 +181,12 @@ class Accordion extends AutoControlledComponent<ReactProps<AccordionProps>, any>
     const { children } = this.props
 
     return (
-      <ElementType {...accessibility.attributes.root} {...unhandledProps} className={classes.root}>
+      <ElementType
+        {...accessibility.attributes.root}
+        {...rtlTextContainer.getAttributes({ forElements: [children] })}
+        {...unhandledProps}
+        className={classes.root}
+      >
         {childrenExist(children) ? children : this.renderPanels()}
       </ElementType>
     )
diff --git a/src/components/Accordion/AccordionContent.tsx b/src/components/Accordion/AccordionContent.tsx
index f0165633e6..0de1013caf 100644
--- a/src/components/Accordion/AccordionContent.tsx
+++ b/src/components/Accordion/AccordionContent.tsx
@@ -9,6 +9,7 @@ import {
   ChildrenComponentProps,
   ContentComponentProps,
   commonPropTypes,
+  rtlTextContainer,
 } from '../../lib'
 import { ReactProps, ComponentEventHandler } from '../../../types/utils'
 
@@ -48,7 +49,11 @@ class AccordionContent extends UIComponent<ReactProps<AccordionContentProps>, an
     const { children, content } = this.props
 
     return (
-      <ElementType {...unhandledProps} className={classes.root}>
+      <ElementType
+        {...rtlTextContainer.getAttributes({ forElements: [children, content] })}
+        {...unhandledProps}
+        className={classes.root}
+      >
         {childrenExist(children) ? children : content}
       </ElementType>
     )
diff --git a/src/components/Accordion/AccordionTitle.tsx b/src/components/Accordion/AccordionTitle.tsx
index db5a604703..8d7ef0baa2 100644
--- a/src/components/Accordion/AccordionTitle.tsx
+++ b/src/components/Accordion/AccordionTitle.tsx
@@ -11,9 +11,11 @@ import {
   ChildrenComponentProps,
   commonPropTypes,
   customPropTypes,
+  rtlTextContainer,
 } from '../../lib'
 import { ReactProps, ComponentEventHandler, ShorthandValue } from '../../../types/utils'
 import Indicator from '../Indicator/Indicator'
+
 export interface AccordionTitleProps
   extends UIComponentProps,
     ContentComponentProps,
@@ -70,12 +72,17 @@ class AccordionTitle extends UIComponent<ReactProps<AccordionTitleProps>, any> {
             styles: styles.indicator,
           },
         })}
-        {content}
+        {rtlTextContainer.createFor({ element: content })}
       </>
     )
 
     return (
-      <ElementType {...unhandledProps} className={classes.root} onClick={this.handleClick}>
+      <ElementType
+        {...rtlTextContainer.getAttributes({ forElements: [children] })}
+        {...unhandledProps}
+        className={classes.root}
+        onClick={this.handleClick}
+      >
         {childrenExist(children) ? children : contentElement}
       </ElementType>
     )
diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx
index 615046a5ea..64ad08c059 100644
--- a/src/components/Box/Box.tsx
+++ b/src/components/Box/Box.tsx
@@ -6,6 +6,7 @@ import {
   ContentComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
+  rtlTextContainer,
 } from '../../lib'
 import createComponent, { CreateComponentReturnType } from '../../lib/createComponent'
 import { ReactProps } from '../../../types/utils'
@@ -32,7 +33,11 @@ const Box: CreateComponentReturnType<ReactProps<BoxProps>> = createComponent<Box
     const { children, content } = props
 
     return (
-      <ElementType {...unhandledProps} className={classes.root}>
+      <ElementType
+        {...rtlTextContainer.getAttributes({ forElements: [children, content] })}
+        {...unhandledProps}
+        className={classes.root}
+      >
         {childrenExist(children) ? children : content}
       </ElementType>
     )
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 3fb45bdce4..c9779d5f02 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -12,6 +12,7 @@ import {
   ContentComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
+  rtlTextContainer,
 } from '../../lib'
 import Icon from '../Icon/Icon'
 import Box from '../Box/Box'
@@ -137,12 +138,13 @@ class Button extends UIComponent<ReactProps<ButtonProps>, ButtonState> {
         onClick={this.handleClick}
         onFocus={this.handleFocus}
         {...accessibility.attributes.root}
+        {...rtlTextContainer.getAttributes({ forElements: [children] })}
         {...unhandledProps}
       >
         {hasChildren && children}
         {!hasChildren && iconPosition !== 'after' && this.renderIcon(variables, styles)}
         {Box.create(!hasChildren && content, {
-          defaultProps: { as: 'span', className: classes.content },
+          defaultProps: { as: 'span', styles: styles.content },
         })}
         {!hasChildren && iconPosition === 'after' && this.renderIcon(variables, styles)}
       </ElementType>
diff --git a/src/components/Button/ButtonGroup.tsx b/src/components/Button/ButtonGroup.tsx
index aade7182fb..cf86736fc6 100644
--- a/src/components/Button/ButtonGroup.tsx
+++ b/src/components/Button/ButtonGroup.tsx
@@ -11,6 +11,7 @@ import {
   ChildrenComponentProps,
   ContentComponentProps,
   commonPropTypes,
+  rtlTextContainer,
 } from '../../lib'
 import Button from './Button'
 
@@ -51,11 +52,12 @@ class ButtonGroup extends UIComponent<ReactProps<ButtonGroupProps>, any> {
     styles,
     unhandledProps,
   }): React.ReactNode {
-    const { children, content, buttons, circular } = this.props
+    const { children, buttons, circular, content } = this.props
     if (_.isNil(buttons)) {
       return (
         <ElementType
           {...accessibility.attributes.root}
+          {...rtlTextContainer.getAttributes({ forElements: [children, content] })}
           {...unhandledProps}
           className={classes.root}
         >
diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx
index 4941cf442f..e2df70883b 100644
--- a/src/components/Chat/Chat.tsx
+++ b/src/components/Chat/Chat.tsx
@@ -2,7 +2,13 @@ import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
-import { childrenExist, customPropTypes, UIComponent, commonPropTypes } from '../../lib'
+import {
+  childrenExist,
+  customPropTypes,
+  UIComponent,
+  commonPropTypes,
+  rtlTextContainer,
+} from '../../lib'
 import ChatItem from './ChatItem'
 import ChatMessage from './ChatMessage'
 import { ReactProps, ShorthandValue } from '../../../types/utils'
@@ -37,7 +43,10 @@ class Chat extends UIComponent<ReactProps<ChatProps>, any> {
     items: PropTypes.arrayOf(customPropTypes.itemShorthand),
   }
 
-  static defaultProps = { accessibility: chatBehavior, as: 'ul' }
+  static defaultProps = {
+    accessibility: chatBehavior,
+    as: 'ul',
+  }
 
   static Item = ChatItem
   static Message = ChatMessage
@@ -54,6 +63,7 @@ class Chat extends UIComponent<ReactProps<ChatProps>, any> {
         className={classes.root}
         {...accessibility.attributes.root}
         {...accessibility.keyHandlers.root}
+        {...rtlTextContainer.getAttributes({ forElements: [children] })}
         {...unhandledProps}
       >
         {childrenExist(children) ? children : _.map(items, item => ChatItem.create(item))}
diff --git a/src/components/Chat/ChatItem.tsx b/src/components/Chat/ChatItem.tsx
index 49d42efca1..dbbcf8b49a 100644
--- a/src/components/Chat/ChatItem.tsx
+++ b/src/components/Chat/ChatItem.tsx
@@ -11,6 +11,7 @@ import {
   ChildrenComponentProps,
   commonPropTypes,
   customPropTypes,
+  rtlTextContainer,
 } from '../../lib'
 import Box from '../Box/Box'
 import { ComponentSlotStylesPrepared } from '../../themes/types'
@@ -55,7 +56,11 @@ class ChatItem extends UIComponent<ReactProps<ChatItemProps>, any> {
     const { children } = this.props
 
     return (
-      <ElementType {...unhandledProps} className={classes.root}>
+      <ElementType
+        {...rtlTextContainer.getAttributes({ forElements: [children] })}
+        {...unhandledProps}
+        className={classes.root}
+      >
         {childrenExist(children) ? children : this.renderChatItem(styles)}
       </ElementType>
     )
diff --git a/src/components/Chat/ChatMessage.tsx b/src/components/Chat/ChatMessage.tsx
index 9f590fcdd3..93d1dc1e18 100644
--- a/src/components/Chat/ChatMessage.tsx
+++ b/src/components/Chat/ChatMessage.tsx
@@ -14,6 +14,7 @@ import {
   ContentComponentProps,
   commonPropTypes,
   isFromKeyboard,
+  rtlTextContainer,
 } from '../../lib'
 import { ReactProps, ShorthandValue, ComponentEventHandler } from '../../../types/utils'
 import { chatMessageBehavior } from '../../lib/accessibility'
@@ -109,6 +110,7 @@ class ChatMessage extends UIComponent<ReactProps<ChatMessageProps>, ChatMessageS
       <ElementType
         {...accessibility.attributes.root}
         {...accessibility.keyHandlers.root}
+        {...rtlTextContainer.getAttributes({ forElements: [children] })}
         {...unhandledProps}
         onFocus={this.handleFocus}
         className={className}
diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx
index c57ecbe959..faf36c070f 100644
--- a/src/components/Divider/Divider.tsx
+++ b/src/components/Divider/Divider.tsx
@@ -10,6 +10,7 @@ import {
   ColorComponentProps,
   ContentComponentProps,
   commonPropTypes,
+  rtlTextContainer,
 } from '../../lib'
 import { ReactProps } from '../../../types/utils'
 
@@ -53,7 +54,11 @@ class Divider extends UIComponent<ReactProps<DividerProps>, any> {
     const { children, content } = this.props
 
     return (
-      <ElementType {...unhandledProps} className={classes.root}>
+      <ElementType
+        {...rtlTextContainer.getAttributes({ forElements: [children, content] })}
+        {...unhandledProps}
+        className={classes.root}
+      >
         {childrenExist(children) ? children : content}
       </ElementType>
     )
diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
index c7fee07640..17cce88430 100644
--- a/src/components/Form/Form.tsx
+++ b/src/components/Form/Form.tsx
@@ -9,6 +9,7 @@ import {
   UIComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
+  rtlTextContainer,
 } from '../../lib'
 import { ComponentEventHandler, ReactProps, ShorthandValue } from '../../../types/utils'
 import FormField from './FormField'
@@ -62,6 +63,7 @@ class Form extends UIComponent<ReactProps<FormProps>, any> {
         className={classes.root}
         action={action}
         onSubmit={this.handleSubmit}
+        {...rtlTextContainer.getAttributes({ forElements: [children] })}
         {...unhandledProps}
       >
         {childrenExist(children) ? children : this.renderFields()}
diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx
index 040773ffee..087ca4ce29 100644
--- a/src/components/Grid/Grid.tsx
+++ b/src/components/Grid/Grid.tsx
@@ -9,6 +9,7 @@ import {
   ChildrenComponentProps,
   commonPropTypes,
   ContentComponentProps,
+  rtlTextContainer,
 } from '../../lib'
 import { ReactProps } from '../../../types/utils'
 import { Accessibility } from '../../lib/accessibility/types'
@@ -72,7 +73,11 @@ class Grid extends UIComponent<ReactProps<GridProps>, any> {
     const { children, content } = this.props
 
     return (
-      <ElementType className={classes.root} {...unhandledProps}>
+      <ElementType
+        className={classes.root}
+        {...rtlTextContainer.getAttributes({ forElements: [children, content] })}
+        {...unhandledProps}
+      >
         {childrenExist(children) ? children : content}
       </ElementType>
     )
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 4ede7be253..4ea69c2a14 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -10,6 +10,7 @@ import {
   ContentComponentProps,
   commonPropTypes,
   ColorComponentProps,
+  rtlTextContainer,
 } from '../../lib'
 import HeaderDescription from './HeaderDescription'
 import { ReactProps, ShorthandValue } from '../../../types/utils'
@@ -45,6 +46,7 @@ class Header extends UIComponent<ReactProps<HeaderProps>, any> {
     ...commonPropTypes.createCommon({ color: true }),
     description: customPropTypes.itemShorthand,
     textAlign: PropTypes.oneOf(['left', 'center', 'right', 'justified']),
+    rtlAttributes: PropTypes.func,
   }
 
   static defaultProps = {
@@ -54,26 +56,29 @@ class Header extends UIComponent<ReactProps<HeaderProps>, any> {
   static Description = HeaderDescription
 
   renderComponent({ ElementType, classes, variables: v, unhandledProps }) {
-    const { children, content, description } = this.props
+    const { children, description, content } = this.props
 
-    if (childrenExist(children)) {
-      return (
-        <ElementType {...unhandledProps} className={classes.root}>
-          {children}
-        </ElementType>
-      )
-    }
+    const hasChildren = childrenExist(children)
+    const contentElement = childrenExist(children) ? children : content
 
     return (
-      <ElementType {...unhandledProps} className={classes.root}>
-        {content}
-        {HeaderDescription.create(description, {
-          defaultProps: {
-            variables: {
-              ...(v.descriptionColor && { color: v.descriptionColor }),
-            },
-          },
+      <ElementType
+        {...rtlTextContainer.getAttributes({
+          forElements: [children, content],
+          condition: !description,
         })}
+        {...unhandledProps}
+        className={classes.root}
+      >
+        {rtlTextContainer.createFor({ element: contentElement, condition: !!description })}
+        {!hasChildren &&
+          HeaderDescription.create(description, {
+            defaultProps: {
+              variables: {
+                ...(v.descriptionColor && { color: v.descriptionColor }),
+              },
+            },
+          })}
       </ElementType>
     )
   }
diff --git a/src/components/Header/HeaderDescription.tsx b/src/components/Header/HeaderDescription.tsx
index 7c013a7fca..dd75d0d487 100644
--- a/src/components/Header/HeaderDescription.tsx
+++ b/src/components/Header/HeaderDescription.tsx
@@ -9,6 +9,7 @@ import {
   ContentComponentProps,
   commonPropTypes,
   ColorComponentProps,
+  rtlTextContainer,
 } from '../../lib'
 import { ReactProps } from '../../../types/utils'
 
@@ -39,7 +40,11 @@ class HeaderDescription extends UIComponent<ReactProps<HeaderDescriptionProps>,
   renderComponent({ ElementType, classes, unhandledProps }) {
     const { children, content } = this.props
     return (
-      <ElementType {...unhandledProps} className={classes.root}>
+      <ElementType
+        {...rtlTextContainer.getAttributes({ forElements: [children, content] })}
+        {...unhandledProps}
+        className={classes.root}
+      >
         {childrenExist(children) ? children : content}
       </ElementType>
     )
diff --git a/src/components/ItemLayout/ItemLayout.tsx b/src/components/ItemLayout/ItemLayout.tsx
index 691f9b1db1..1b9ea5ad74 100644
--- a/src/components/ItemLayout/ItemLayout.tsx
+++ b/src/components/ItemLayout/ItemLayout.tsx
@@ -9,6 +9,7 @@ import {
   UIComponentProps,
   commonPropTypes,
   ContentComponentProps,
+  rtlTextContainer,
 } from '../../lib'
 import Layout from '../Layout/Layout'
 import { ComponentSlotClasses, ICSSInJSStyle } from '../../themes/types'
@@ -126,12 +127,12 @@ class ItemLayout extends UIComponent<ReactProps<ItemLayoutProps>, any> {
           gap={pxToRem(8)}
           debug={debug}
           truncateMain={truncateHeader}
-          main={header}
+          main={rtlTextContainer.createFor({ element: header })}
           rootCSS={headerCSS}
           end={
             headerMedia && (
               <span style={headerMediaCSS} className={mediaClasses}>
-                {headerMedia}
+                {rtlTextContainer.createFor({ element: headerMedia })}
               </span>
             )
           }
@@ -153,11 +154,11 @@ class ItemLayout extends UIComponent<ReactProps<ItemLayoutProps>, any> {
           debug={debug}
           truncateMain={truncateContent}
           rootCSS={contentCSS}
-          main={content}
+          main={rtlTextContainer.createFor({ element: content })}
           end={
             contentMedia && (
               <span style={contentMediaCSS} className={mediaClasses}>
-                {contentMedia}
+                {rtlTextContainer.createFor({ element: contentMedia })}
               </span>
             )
           }
@@ -190,7 +191,7 @@ class ItemLayout extends UIComponent<ReactProps<ItemLayoutProps>, any> {
         start={
           startArea && (
             <span style={mediaCSS} className={mergedMediaClasses}>
-              {startArea}
+              {rtlTextContainer.createFor({ element: startArea })}
             </span>
           )
         }
@@ -198,7 +199,7 @@ class ItemLayout extends UIComponent<ReactProps<ItemLayoutProps>, any> {
         end={
           endArea && (
             <span style={endMediaCSS} className={mergedEndMediaClasses}>
-              {endArea}
+              {rtlTextContainer.createFor({ element: endArea })}
             </span>
           )
         }
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index 0c09346daa..4c9b928304 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -12,6 +12,7 @@ import {
   ContentComponentProps,
   commonPropTypes,
   ColorComponentProps,
+  rtlTextContainer,
 } from '../../lib'
 
 import Icon from '../Icon/Icon'
@@ -87,7 +88,11 @@ class Label extends UIComponent<ReactProps<LabelProps>, any> {
 
     if (childrenExist(children)) {
       return (
-        <ElementType {...unhandledProps} className={classes.root}>
+        <ElementType
+          {...rtlTextContainer.getAttributes({ forElements: [children] })}
+          {...unhandledProps}
+          className={classes.root}
+        >
           {children}
         </ElementType>
       )
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index 22aed8dec1..4925863f42 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import * as PropTypes from 'prop-types'
 import cx from 'classnames'
 
-import { UIComponent, UIComponentProps, commonPropTypes } from '../../lib'
+import { UIComponent, UIComponentProps, commonPropTypes, rtlTextContainer } from '../../lib'
 import { ReactProps } from '../../../types/utils'
 import { ICSSInJSStyle } from '../../themes/types'
 
@@ -96,15 +96,42 @@ class Layout extends UIComponent<ReactProps<LayoutProps>, any> {
     // TODO: when an area is another Layout, do not wrap them in an extra div
     // TODO: option 1) higher value layouts could use start={Layout.create(start)} to ensure Areas are layout root
     renderStartArea({ start, classes }) {
-      return start && <div className={cx('ui-layout__start', classes.start)}>{start}</div>
+      return (
+        start && (
+          <div
+            className={cx('ui-layout__start', classes.start)}
+            {...rtlTextContainer.getAttributes({ forElements: [start] })}
+          >
+            {start}
+          </div>
+        )
+      )
     },
 
     renderMainArea({ main, classes }) {
-      return main && <div className={cx('ui-layout__main', classes.main)}>{main}</div>
+      return (
+        main && (
+          <div
+            className={cx('ui-layout__main', classes.main)}
+            {...rtlTextContainer.getAttributes({ forElements: [main] })}
+          >
+            {main}
+          </div>
+        )
+      )
     },
 
     renderEndArea({ end, classes }) {
-      return end && <div className={cx('ui-layout__end', classes.end)}>{end}</div>
+      return (
+        end && (
+          <div
+            className={cx('ui-layout__end', classes.end)}
+            {...rtlTextContainer.getAttributes({ forElements: [end] })}
+          >
+            {end}
+          </div>
+        )
+      )
     },
 
     // Heads up!
diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
index 7f1059fcc0..66088bcafb 100644
--- a/src/components/List/List.tsx
+++ b/src/components/List/List.tsx
@@ -10,6 +10,7 @@ import {
   UIComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
+  rtlTextContainer,
 } from '../../lib'
 import ListItem from './ListItem'
 import { listBehavior } from '../../lib/accessibility'
@@ -141,6 +142,7 @@ class List extends AutoControlledComponent<ReactProps<ListProps>, ListState> {
       <ElementType
         {...accessibility.attributes.root}
         {...accessibility.keyHandlers.root}
+        {...rtlTextContainer.getAttributes({ forElements: [children] })}
         {...unhandledProps}
         className={classes.root}
       >
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index 6dc9ffc374..bd6475a49b 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -11,6 +11,7 @@ import {
   ChildrenComponentProps,
   commonPropTypes,
   getKindProp,
+  rtlTextContainer,
 } from '../../lib'
 import MenuItem from './MenuItem'
 import { menuBehavior } from '../../lib/accessibility'
@@ -192,7 +193,12 @@ class Menu extends AutoControlledComponent<ReactProps<MenuProps>, MenuState> {
   renderComponent({ ElementType, classes, accessibility, variables, unhandledProps }) {
     const { children } = this.props
     return (
-      <ElementType {...accessibility.attributes.root} {...unhandledProps} className={classes.root}>
+      <ElementType
+        {...accessibility.attributes.root}
+        {...rtlTextContainer.getAttributes({ forElements: [children] })}
+        {...unhandledProps}
+        className={classes.root}
+      >
         {childrenExist(children) ? children : this.renderItems(variables)}
       </ElementType>
     )
diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx
index 96357f87fa..2d66275b5b 100644
--- a/src/components/Menu/MenuItem.tsx
+++ b/src/components/Menu/MenuItem.tsx
@@ -15,6 +15,7 @@ import {
   commonPropTypes,
   isFromKeyboard,
   EventStack,
+  rtlTextContainer,
 } from '../../lib'
 import Icon from '../Icon/Icon'
 import Menu from '../Menu/Menu'
@@ -212,7 +213,7 @@ class MenuItem extends AutoControlledComponent<ReactProps<MenuItemProps>, MenuIt
             Icon.create(this.props.icon, {
               defaultProps: { xSpacing: !!content ? 'after' : 'none' },
             })}
-          {content}
+          {rtlTextContainer.createFor({ element: content })}
           {menu &&
             Indicator.create(indicatorWithDefaults, {
               defaultProps: {
diff --git a/src/components/Popup/PopupContent.tsx b/src/components/Popup/PopupContent.tsx
index 4ccf9956b9..ad70a8a9a5 100644
--- a/src/components/Popup/PopupContent.tsx
+++ b/src/components/Popup/PopupContent.tsx
@@ -11,6 +11,7 @@ import {
   ChildrenComponentProps,
   ContentComponentProps,
   commonPropTypes,
+  rtlTextContainer,
 } from '../../lib'
 import { ReactProps, ComponentEventHandler } from '../../../types/utils'
 
@@ -68,6 +69,7 @@ class PopupContent extends UIComponent<ReactProps<PopupContentProps>, any> {
     return (
       <ElementType
         className={classes.root}
+        {...rtlTextContainer.getAttributes({ forElements: [children, content] })}
         {...unhandledProps}
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
diff --git a/src/components/Portal/Portal.tsx b/src/components/Portal/Portal.tsx
index 1aefec9cbf..559e861c53 100644
--- a/src/components/Portal/Portal.tsx
+++ b/src/components/Portal/Portal.tsx
@@ -10,6 +10,7 @@ import {
   ChildrenComponentProps,
   commonPropTypes,
   ContentComponentProps,
+  rtlTextContainer,
 } from '../../lib'
 import Ref from '../Ref/Ref'
 import PortalInner from './PortalInner'
@@ -131,7 +132,11 @@ class Portal extends AutoControlledComponent<ReactPropsStrict<PortalProps>, Port
     return (
       open && (
         <Ref innerRef={this.handlePortalRef}>
-          <PortalInner onMount={this.handleMount} onUnmount={this.handleUnmount}>
+          <PortalInner
+            onMount={this.handleMount}
+            onUnmount={this.handleUnmount}
+            {...rtlTextContainer.getAttributes({ forElements: [contentToRender] })}
+          >
             {trapFocus ? (
               <FocusTrapZone {...focusTrapZoneProps}>{contentToRender}</FocusTrapZone>
             ) : (
diff --git a/src/components/RadioGroup/RadioGroup.tsx b/src/components/RadioGroup/RadioGroup.tsx
index e408746cf8..2d6710ffc8 100644
--- a/src/components/RadioGroup/RadioGroup.tsx
+++ b/src/components/RadioGroup/RadioGroup.tsx
@@ -11,6 +11,7 @@ import {
   UIComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
+  rtlTextContainer,
 } from '../../lib'
 import RadioGroupItem, { RadioGroupItemProps } from './RadioGroupItem'
 import { radioGroupBehavior } from '../../lib/accessibility'
@@ -83,6 +84,7 @@ class RadioGroup extends AutoControlledComponent<ReactProps<RadioGroupProps>, an
       <ElementType
         {...accessibility.attributes.root}
         {...accessibility.keyHandlers.root}
+        {...rtlTextContainer.getAttributes({ forElements: [children] })}
         {...unhandledProps}
         className={classes.root}
       >
diff --git a/src/components/RadioGroup/RadioGroupItem.tsx b/src/components/RadioGroup/RadioGroupItem.tsx
index ae08247fff..ef912ca92c 100644
--- a/src/components/RadioGroup/RadioGroupItem.tsx
+++ b/src/components/RadioGroup/RadioGroupItem.tsx
@@ -11,6 +11,7 @@ import {
   UIComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
+  rtlTextContainer,
 } from '../../lib'
 import Label from '../Label/Label'
 import { ComponentEventHandler, ReactProps, ShorthandValue } from '../../../types/utils'
@@ -164,7 +165,7 @@ class RadioGroupItem extends AutoControlledComponent<
               styles: styles.icon,
             },
           })}
-          {label}
+          {rtlTextContainer.createFor({ element: label })}
         </Label>
       </ElementType>
     )
diff --git a/src/components/Segment/Segment.tsx b/src/components/Segment/Segment.tsx
index 336f433688..5a6fb14eb7 100644
--- a/src/components/Segment/Segment.tsx
+++ b/src/components/Segment/Segment.tsx
@@ -7,6 +7,7 @@ import {
   ContentComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
+  rtlTextContainer,
 } from '../../lib'
 import { ReactProps, ShorthandValue } from '../../../types/utils'
 import Box from '../Box/Box'
@@ -32,6 +33,7 @@ class Segment extends UIComponent<ReactProps<SegmentProps>, any> {
       content: 'shorthand',
     }),
     inverted: PropTypes.bool,
+    rtlAttributes: PropTypes.func,
   }
 
   static defaultProps = {
@@ -42,7 +44,11 @@ class Segment extends UIComponent<ReactProps<SegmentProps>, any> {
     const { children, content } = this.props
 
     return (
-      <ElementType {...unhandledProps} className={classes.root}>
+      <ElementType
+        {...rtlTextContainer.getAttributes({ forElements: [children] })}
+        {...unhandledProps}
+        className={classes.root}
+      >
         {childrenExist(children) ? children : Box.create(content)}
       </ElementType>
     )
diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
index 5ebecbfb73..7c1e7f24fb 100644
--- a/src/components/Text/Text.tsx
+++ b/src/components/Text/Text.tsx
@@ -10,6 +10,7 @@ import {
   ChildrenComponentProps,
   commonPropTypes,
   ColorComponentProps,
+  rtlTextContainer,
 } from '../../lib'
 
 import { ReactProps } from '../../../types/utils'
@@ -88,13 +89,13 @@ class Text extends UIComponent<ReactProps<TextProps>, any> {
   renderComponent({ ElementType, classes, unhandledProps }): React.ReactNode {
     const { children, content } = this.props
 
-    const hasChildren = childrenExist(children)
-
-    const maybeDirAuto = !hasChildren && typeof content === 'string' ? { dir: 'auto' } : null
-
     return (
-      <ElementType className={classes.root} {...maybeDirAuto} {...unhandledProps}>
-        {hasChildren ? children : content}
+      <ElementType
+        className={classes.root}
+        {...rtlTextContainer.getAttributes({ forElements: [children, content] })}
+        {...unhandledProps}
+      >
+        {childrenExist(children) ? children : content}
       </ElementType>
     )
   }
diff --git a/src/components/Tree/Tree.tsx b/src/components/Tree/Tree.tsx
index 2bac51f79b..180a4d8b80 100644
--- a/src/components/Tree/Tree.tsx
+++ b/src/components/Tree/Tree.tsx
@@ -9,6 +9,7 @@ import {
   commonPropTypes,
   UIComponentProps,
   ChildrenComponentProps,
+  rtlTextContainer,
 } from '../../lib'
 import { ShorthandValue, ShorthandRenderFunction, ReactProps } from '../../../types/utils'
 import { Accessibility } from '../../lib/accessibility/types'
@@ -52,6 +53,7 @@ class Tree extends UIComponent<ReactProps<TreeProps>> {
     accessibility: PropTypes.func,
     items: customPropTypes.collectionShorthand,
     renderItemTitle: PropTypes.func,
+    rtlAttributes: PropTypes.func,
   }
 
   public static defaultProps = {
@@ -75,7 +77,12 @@ class Tree extends UIComponent<ReactProps<TreeProps>> {
     const { children } = this.props
 
     return (
-      <ElementType className={classes.root} {...accessibility.attributes.root} {...unhandledProps}>
+      <ElementType
+        className={classes.root}
+        {...accessibility.attributes.root}
+        {...rtlTextContainer.getAttributes({ forElements: [children] })}
+        {...unhandledProps}
+      >
         {childrenExist(children) ? children : this.renderContent()}
       </ElementType>
     )
diff --git a/src/components/Tree/TreeItem.tsx b/src/components/Tree/TreeItem.tsx
index 11d19d622a..3b482d7c31 100644
--- a/src/components/Tree/TreeItem.tsx
+++ b/src/components/Tree/TreeItem.tsx
@@ -14,6 +14,7 @@ import {
   commonPropTypes,
   UIComponentProps,
   ChildrenComponentProps,
+  rtlTextContainer,
 } from '../../lib'
 import { ReactProps, ShorthandRenderFunction, ShorthandValue } from '../../../types/utils'
 
@@ -69,6 +70,7 @@ class TreeItem extends AutoControlledComponent<ReactProps<TreeItemProps>, TreeIt
     items: customPropTypes.collectionShorthand,
     open: PropTypes.bool,
     renderItemTitle: PropTypes.func,
+    treeItemRtlAttributes: PropTypes.func,
     title: customPropTypes.itemShorthand,
   }
 
@@ -112,7 +114,12 @@ class TreeItem extends AutoControlledComponent<ReactProps<TreeItemProps>, TreeIt
     const { children } = this.props
 
     return (
-      <ElementType className={classes.root} {...accessibility.attributes.root} {...unhandledProps}>
+      <ElementType
+        className={classes.root}
+        {...accessibility.attributes.root}
+        {...rtlTextContainer.getAttributes({ forElements: [children] })}
+        {...unhandledProps}
+      >
         {childrenExist(children) ? children : this.renderContent()}
       </ElementType>
     )
diff --git a/src/components/Tree/TreeTitle.tsx b/src/components/Tree/TreeTitle.tsx
index 74bf168903..d2a8326219 100644
--- a/src/components/Tree/TreeTitle.tsx
+++ b/src/components/Tree/TreeTitle.tsx
@@ -10,6 +10,7 @@ import {
   UIComponentProps,
   ChildrenComponentProps,
   ContentComponentProps,
+  rtlTextContainer,
 } from '../../lib'
 import { treeTitleBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/types'
@@ -64,6 +65,7 @@ class TreeTitle extends UIComponent<ReactProps<TreeTitleProps>> {
         className={classes.root}
         onClick={this.handleClick}
         {...accessibility.attributes.root}
+        {...rtlTextContainer.getAttributes({ forElements: [children, content] })}
         {...unhandledProps}
       >
         {childrenExist(children) ? children : content}
diff --git a/src/lib/index.ts b/src/lib/index.ts
index bff791ebbd..f7067c9f0f 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -8,6 +8,7 @@ export { default as UIComponent } from './UIComponent'
 export { EventStack } from './eventStack'
 export { felaRenderer, felaRtlRenderer } from './felaRenderer'
 export { default as toCompactArray } from './toCompactArray'
+export { default as rtlTextContainer } from './rtlTextContainer'
 
 export * from './factories'
 export { default as callable } from './callable'
diff --git a/src/lib/rtlTextContainer.tsx b/src/lib/rtlTextContainer.tsx
new file mode 100644
index 0000000000..24037b0e9b
--- /dev/null
+++ b/src/lib/rtlTextContainer.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react'
+
+const rtlTextContainer = {
+  getAttributes: ({
+    condition = true,
+    forElements = [],
+  }: {
+    condition?: boolean
+    forElements: any[]
+  }) => {
+    return condition && forElements.some(child => child && typeof child === 'string')
+      ? { dir: 'auto' }
+      : {}
+  },
+  createFor: ({ element, condition = true }: { element: any; condition?: boolean }) => {
+    if (condition && element && typeof element === 'string') {
+      return <span dir="auto">{element}</span>
+    }
+    return element
+  },
+}
+
+export default rtlTextContainer