Text

Whenever you would like to display text inside your application, use the Text component as it applies consistent font styling.

<React.Fragment>
  <Text>
    This is medium text
  </Text>
  <Text
    size="sm"
  >
    This is small text
  </Text>
</React.Fragment>
This is medium text
This is small text

The component also ensures that text will be abbreviated, if the parent component does not hold enough space:

<div
  style={
    Object {
      "overflow": "hidden",
      "width": 100,
    }
  }
>
  <Text>
    This text will be abbreviated.
  </Text>
</div>
This text will be abbreviated.

This means by default text will not be wrapped into new lines. To change this default behaviour set the breakLines option to true.

<div
  style={
    Object {
      "overflow": "hidden",
      "width": 100,
    }
  }
>
  <Text
    breakLines={true}
  >
    This text will be broken into several lines.
  </Text>
</div>
This text will be broken into several lines.