Label

For displaying inline text elements in UI components.

Examples

Sizes

Four text sizes are available using the size prop.

Label - large
Label - medium
Label - small
Label - xSmall
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.

Label - strong
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.

Label - primary
Label - secondary
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.

Label - caps
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

Usage & types

  • Version
  • Install
    npm install @pluralsight/ps-design-system-text
  • Import
    import { Label } from '@pluralsight/ps-design-system-text'
Name
Type
Description
Default
size
xSmall | small | medium | large
Text size (from Label.sizes)
color
primary | secondary
Text color (from Label.colors)primary
strongbooleanBold text stylefalse
capsbooleanUppercase text stylefalse