WUI logo

Text

The Text component is a fundamental UI element used to display and style text content within an application. It provides various typography options, such as font size, weight, color, and alignment, allowing for consistent and customizable presentation of textual information. This component is essential for conveying information clearly and effectively in the user interface.

Source@welcome-ui/text
OverviewProps
import * as React from 'react'
import { Text } from '@welcome-ui/text'


const Example = () => {
  return (
    <>
      <Text m="0" variant="h0">
        Heading (h0)
      </Text>
      <Text m="0" variant="h1">
        Heading (h1)
      </Text>
      <Text m="0" variant="h2">
        Heading (h2)
      </Text>
      <Text m="0" variant="h3">
        Heading (h3)
      </Text>
      <Text m="0" variant="h4">
        Heading (h4)
      </Text>
      <Text m="0" variant="h5">
        Heading (h5)
      </Text>
      <Text m="0" variant="h6">
        Heading (h6)
      </Text>
      <Text m="0" variant="lg">
        Text (lg)
      </Text>
      <Text m="0" variant="md">
        Text (md)
      </Text>
      <Text m="0" variant="sm">
        Text (sm)
      </Text>
      <Text m="0" variant="xs">
        Text (xs)
      </Text>
      <Text m="0" variant="subtitle-md">
        Subtitle (md)
      </Text>
      <Text m="0" variant="subtitle-sm">
        Subtitle (sm)
      </Text>
    </>
  )
}


export default Example

Installation

1

Run the following command:

yarn add @welcome-ui/text
2

Import component:

import { Text } from '@welcome-ui/text'

Examples

Overwrite tag

You can pass a tag name with as to use that tag type with the styling from another tag. For example…

Truncation

Set the number of lines you want to display with lines. Your text will be displayed truncated with an ellipsis (...) at the end (if necessary).

withDash

With the withDash property, a dash is added before the text in headings (h0 to h6).

Icon font