---
name: Text
menu: Components
---

import PropsTable from 'website-src/components/PropsTable'
import { livePreviewStyle } from '../helpers/constants'
import Text from './Text'
import cactusTheme from '@repay/cactus-theme'
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'

# Text

### Try it out

export const code = `<Text textAlign="right" fontStyle="italic" margin="0 auto">
  Stilton fondue stilton. Hard cheese port-salut manchego stinking bishop monterey jack edam
  lancashire camembert de normandie. Paneer cheese on toast cheesy feet halloumi cheesecake cheese
  strings who moved my cheese when the cheese comes out everybody's happy. Bavarian bergkase.
</Text>`

<LiveProvider code={code} scope={{ Text }}>
  <LiveEditor style={livePreviewStyle} />
  <LiveError />
  <LivePreview />
</LiveProvider>

## Best practices

Prefer using the built-in styles defined by the cactus theme in order to adhere to the design system.

## Basic usage

The `Text` is a `span` tag and can be used when you would like to render text that needs custom styles like italics or text alignment.

```jsx
import React from 'react'

export default () => (
  <Text textAlign="right" fontStyle="italic" margin="0 auto">
    Stilton fondue stilton. Hard cheese port-salut manchego stinking bishop monterey jack edam
    lancashire camembert de normandie. Paneer cheese on toast cheesy feet halloumi cheesecake cheese
    strings who moved my cheese when the cheese comes out everybody's happy. Bavarian bergkase.
  </Text>
)
```

## Properties

<PropsTable of={Text} />