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

import { Playground, PropsTable } from 'docz'
import { Text } from '@personio/ui-components'
import './text.scss'

# Text

<PropsTable of={Text} />

## Example

<Playground>
  <div className="text-container">
    <Text>Default</Text>
    <Text theme="primary">Primary</Text>
    <Text theme="success">Success</Text>
    <Text theme="info">Info</Text>
    <Text theme="danger">Danger</Text>
    <Text theme="warning">Warning</Text>
    <Text theme="dark">Dark</Text>
  </div>
</Playground>

## Block

<Playground>
  <div className="text-container">
    <Text theme="primary" block>Primary</Text>
    <Text theme="success" block>Success</Text>
    <Text theme="warning" block>Warning</Text>
  </div>
</Playground>

## Uppercase

<Playground>
  <div className="text-container">
    <Text theme="primary" uppercase>Primary</Text>
    <Text theme="success" uppercase>Success</Text>
    <Text theme="warning" uppercase>Warning</Text>
  </div>
</Playground>

## With custom className

<Playground>
  <div className="text-container">
    <Text theme="primary" className="custom-text-container">Primary</Text>
  </div>
</Playground>
