---
name: Base Text
route: /Text/BaseText
menu: Text
---

import { Playground, PropsTable } from 'docz'
import { BaseText } from '../../src'
import { toTitleCase } from '@barcard/functions/'

## BaseText

## Properties

<PropsTable of={BaseText} includeDescription={true} />

## Basic Usage

<Playground>
  <React.Fragment>
    {['regular', 'light', 'italic', 'semibold', 'bold', 'lightitalic'].map(
      x => (
        <BaseText
          key={x}
          weight={x}
          children={`Open Sans 21px ${toTitleCase(x)} \n`}
        />
      ),
    )}
  </React.Fragment>
</Playground>

## With different colors

<Playground>
  <BaseText color={'primary1'} children={`Primary 1 \n`} />
  <BaseText color={'primary2'} children={`Primary 2 \n`} />
  <BaseText color={'primary3'} children={`Primary 3 \n`} />
  <BaseText color={'secondary1'} children={`Secondary 1 \n`} />
  <BaseText color={'secondary2'} children={`Secondary 2 \n`} />
  <BaseText color={'secondary3'} children={`Secondary 3 \n`} />
  <BaseText color={'teal'} children={`Teal \n`} />
  <BaseText color={'pink'} children={`Pink`} />
</Playground>
