Welcome UI 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
OverviewProps
import { Text } from 'welcome-ui/Text'


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


export default Example

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).

Tooltip