Label

For displaying inline text elements in UI components.

Install
npm install @pluralsight/ps-design-system-text
Import
import { Label } from '@pluralsight/ps-design-system-text'

Examples

Sizes

Four text sizes are available using the size prop.

import { Label } from '@pluralsight/ps-design-system-text'
import React from 'react'

const Example: React.FC = props => {
  return (
    <React.Fragment>
      <div>
        <Label size={Label.sizes.large}>Label - large</Label>
      </div>
      <div>
        <Label size={Label.sizes.medium}>Label - medium</Label>
      </div>
      <div>
        <Label size={Label.sizes.small}>Label - small</Label>
      </div>
      <div>
        <Label size={Label.sizes.xSmall}>Label - xSmall</Label>
      </div>
    </React.Fragment>
  )
}

export default Example

Strong

The strong prop increases the font weight.

import { Label } from '@pluralsight/ps-design-system-text'
import React from 'react'

const Example: React.FC = props => {
  return (
    <React.Fragment>
      <div>
        <Label strong>Label - strong</Label>
      </div>
    </React.Fragment>
  )
}

export default Example

Colors

Text color can be set to Primary (high contrast) or Secondary (medium contrast) using the color prop.

import { Label } from '@pluralsight/ps-design-system-text'
import React from 'react'

const Example: React.FC = props => {
  return (
    <React.Fragment>
      <div>
        <Label color={Heading.colors.primary}>Label - primary</Label>
      </div>
      <div>
        <Label color={Heading.colors.secondary}>Label - secondary</Label>
      </div>
    </React.Fragment>
  )
}

export default Example

All caps

The caps prop will uppercase the text and adds some letter-spacing to properly track out the text.

import { Label } from '@pluralsight/ps-design-system-text'
import React from 'react'

const Example: React.FC = props => {
  return (
    <React.Fragment>
      <div>
        <Label caps>Label - caps</Label>
      </div>
    </React.Fragment>
  )
}

export default Example

Monospace font

The mono prop will render the label in a monospace font.

import { Label } from '@pluralsight/ps-design-system-text'
import React from 'react'

const Example: React.FC = props => {
  return (
    <React.Fragment>
      <div>
        <Label mono>Label - mono</Label>
      </div>
      <div>
        <Label mono strong>
          Label - strong! mono
        </Label>
      </div>
    </React.Fragment>
  )
}

export default Example

Props

Name	Type	Description	Default
`caps`	`boolean`	Uppercase text style	`false`
`color`	`primary \| secondary`	Text color (from Label.colors)	`primary`
`mono`	`boolean`	Use monospace font	`false`
`size`	`xSmall \| small \| medium \| large`	Text size (from Label.sizes)	`medium`
`strong`	`boolean`	Bold text style	`false`