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

## Overview

```tsx
import { Text } from 'welcome-ui/Text'

const Example = () => {
  return (
    <div className="flex flex-col gap-md">
      <Text variant="display-xl">Display (xl)</Text>
      <Text variant="display-lg">Display (lg)</Text>
      <Text variant="display-md">Display (md)</Text>
      <Text variant="display-sm">Display (sm)</Text>
      <Text variant="heading-xl">Heading (xl)</Text>
      <Text variant="heading-lg">Heading (lg)</Text>
      <Text variant="heading-md-strong">Heading (md)</Text>
      <Text variant="heading-sm-strong">Heading (sm)</Text>
      <Text variant="heading-xs-strong">Heading (xs)</Text>
      <Text variant="heading-md-strong">Heading (md-strong)</Text>
      <Text variant="heading-sm-strong">Heading (sm-strong)</Text>
      <Text variant="heading-xs-strong">Heading (xs-strong)</Text>
      <Text variant="body-xl">Body (xl)</Text>
      <Text variant="body-lg">Body (lg)</Text>
      <Text variant="body-md">Body (md)</Text>
      <Text variant="body-sm">Body (sm)</Text>
      <Text variant="body-xl-strong">Body (xl-strong)</Text>
      <Text variant="body-lg-strong">Body (lg-strong)</Text>
      <Text variant="body-md-strong">Body (md-strong)</Text>
      <Text variant="body-sm-strong">Body (sm-strong)</Text>
      <Text variant="label-xl">Label (xl)</Text>
      <Text variant="label-lg">Label (lg)</Text>
      <Text variant="label-md">Label (md)</Text>
      <Text variant="label-sm">Label (sm)</Text>
      <Text variant="label-md-strong">Label (md-strong)</Text>
      <Text variant="label-sm-strong">Label (sm-strong)</Text>
    </div>
  )
}

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…

```tsx
import { Text } from 'welcome-ui/Text'

const Example = () => {
  return (
    <>
      <Text as="h3" className="mb-3xl" variant="display-sm">
        h3 styled as a display-sm
      </Text>
      <Text as="h1" variant="body-md">
        H1 tag styled as a body-md
      </Text>
    </>
  )
}

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

```tsx
import { Text } from 'welcome-ui/Text'

const Example = () => {
  return (
    <>
      <Text lines={1}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis viverra lectus, vel
        tristique turpis. Vivamus magna nulla, elementum in feugiat feugiat, egestas eget nibh. Ut
        ac justo vitae dolor iaculis gravida. In eu nisl lorem. Cras eu mauris et tortor suscipit
        accumsan. Duis ullamcorper nisl a justo ultricies, eu consequat risus imperdiet. Phasellus
        at metus cursus, fringilla tortor eu, scelerisque quam. Donec efficitur porta elit ac
        malesuada.
      </Text>
      <Text lines={3}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis viverra lectus, vel
        tristique turpis. Vivamus magna nulla, elementum in feugiat feugiat, egestas eget nibh. Ut
        ac justo vitae dolor iaculis gravida. In eu nisl lorem. Cras eu mauris et tortor suscipit
        accumsan. Duis ullamcorper nisl a justo ultricies, eu consequat risus imperdiet. Phasellus
        at metus cursus, fringilla tortor eu, scelerisque quam. Donec efficitur porta elit ac
        malesuada.
      </Text>
      <Text lines={3}>Lorem ipsum dolor sit amet</Text>
      <Text lines={3} variant="heading-xs-strong">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis viverra lectus, vel
        tristique turpis. Vivamus magna nulla, elementum in feugiat feugiat, egestas eget nibh. Ut
        ac justo vitae dolor iaculis gravida. In eu nisl lorem. Cras eu mauris et tortor suscipit
        accumsan. Duis ullamcorper nisl a justo ultricies, eu consequat risus imperdiet. Phasellus
        at metus cursus, fringilla tortor eu, scelerisque quam. Donec efficitur porta elit ac
        malesuada.
      </Text>
    </>
  )
}

export default Example
```

### withDash

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

```tsx
import { Text } from 'welcome-ui/Text'

const Example = () => {
  return (
    <Text variant="heading-sm-strong" withDash>
      Heading with a dash
    </Text>
  )
}

export default Example
```

## Props

### Text

```tsx
interface TextProps {
  lines?: number
  sizes?: 'md' | 'lg' | 'sm' | 'xl'
  strong?: boolean
  variant?: 'display-xl' | 'display-lg' | 'display-md' | 'display-sm' | 'heading-xl' | 'heading-lg' | 'heading-md' | 'heading-sm' | 'heading-xs' | 'heading-md-strong' | 'heading-sm-strong' | 'heading-xs-strong' | 'body-xl' | 'body-lg' | 'body-md' | 'body-sm' | 'body-xl-strong' | 'body-lg-strong' | 'body-md-strong' | 'body-sm-strong' | 'label-xl' | 'label-lg' | 'label-md' | 'label-sm' | 'label-md-strong' | 'label-sm-strong'
  withDash?: boolean
}
```