---
menu: Atoms
name: Text
route: /text
---

import { Playground, PropsTable } from 'docz';
import Text from './';

# Text

## Use cases

<div>
  <Text type="h1">h1</Text>
  <Text type="h2">h2</Text>
  <Text type="h3">h3</Text>
  <Text type="h4">h4</Text>
  <Text type="h5">h5</Text>
  <Text type="h6">h6</Text>
  <Text/>
  <Text strong>strong</Text>
</div>
<div>
  <Text primary >primary</Text>
  <Text secondary >secondary</Text>
  <Text success >success</Text>
  <Text warn >warn</Text>
</div>
<div>
  <Text primary strong align='center' transform='capitalize' type='h3' >
    capital strong center primary h3 example
  </Text>
</div>

## PropsTable

<PropsTable of={Text} />

## Theme Colors

This component accepts a variety of props listed on this docs, between that are the "theme color props":

- primary
- secondary
- success
- warn

<Playground>
  <Text/>
  <Text primary >primary</Text>
  <Text secondary >secondary</Text>
  <Text success >success</Text>
  <Text warn >warn</Text>
</Playground>


## align:string

<Playground>
  <Text/>
  <Text align="center">center</Text>
  <Text align="right">right</Text>
</Playground>

## strong:bool

<Playground>
  <Text/>
  <Text strong>strong</Text>
</Playground>

## label:bool

<Playground>
  <Text/>
  <Text isLabel>label</Text>
</Playground>

## transform:string

<Playground>
  <Text/>
  <Text transform="capitalize">capitalize</Text>
  <Text transform="uppercase">uppercase</Text>
</Playground>

## color:string

<Playground>
  <Text/>
  <Text color="tomato">tomato</Text>
  <Text color="rgb(50, 150, 50)">rgb green</Text>
</Playground>

## type:string

<Playground>
  <Text/>
  <Text type="span">span</Text>
  <Text type="h1">h1</Text>
  <Text type="h2">h2</Text>
  <Text type="h3">h3</Text>
  <Text type="h4">h4</Text>
  <Text type="h5">h5</Text>
  <Text type="h6">h6</Text>
</Playground>