---
name: Text
menu: Components
route: /components/text
---

import { Playground, Props } from 'docz'
import Text from './'

# Text

## Import
`import { Text } from '@blasterjs/core'`

## Basic Usage

Exposes text based props: `color`, `fontFamily`, `fontSize`, `fontWeight`,
`fontStyle`, `textAlign`, `lineHeight`, `letterSpacing`, `textDecoration`,
`textOverflow`, `textShadow`, `textTransform`, `whiteSpace`.

The `<Text>` component renders a `<span>` with basic styles by default.

<Playground>
  <Text>Hello world</Text>
  <br />
  <Text as="p">This is a paragraph</Text>
</Playground>

## Semantic text tag elements

<Playground>
  <Text as="strong">Strong</Text>
  <br />
  <Text as="b">Bold</Text>
  <br />
  <Text as="i">Italic</Text>
  <br />
  <Text as="u">Underline</Text>
  <br />
  <Text as="abbr">I18N</Text>
  <br />
  <Text as="del">Deleted</Text>
  <br />
  <Text as="em">Emphasis</Text>
  <br />
  <Text as="s">Strikethrough</Text>
  <br />
  <Text as="code">Code</Text>
  <br />
  <Text as="pre">Pre</Text>
</Playground>

## Prop styling

<Playground>
  <Text fontWeight="bold">I am bold</Text>
  <br />
  <Text color="primary">Primary color</Text>
  <br />
  <Text textAlign="center" fontSize="12px" as="p">Small and centered</Text>
  <br />
  <Text fontSize={4}>Large and in <Text fontWeight="bold">another Text element</Text></Text>
</Playground>

## PropTypes

| Prop | Type | Required | Default | Description |
|:-----|:-----|:---------|:--------|:------------|
| `COMMON` | Style Prop |  |  | see [Style Props](/style-props) |
| `TYPOGRAPHY` | Style Prop |  |  | see [Style Props](/style-props) |
| `FLEX_ITEM` | Style Prop |  |  | see [Style Props](/style-props) |


## Theming

### Schema
```
{
  fonts: {
    fontFamily
  },
  lineHeights: {
    lineHeight
  },
  overrides: css`
    ...
  `
}
```

- [Default theme](https://github.com/raster-foundry/blasterjs/tree/master/packages/core/theme/components/text)
- [Learn more about themeing](/blaster-theme)