Text

The Text is used to create various levels of typographic hierarchies.

import { Text } from '@backyard-ui/core';

Use the size prop to increase the visual size.

Use the color prop to change the visual color.

Use the decoration prop to apply some decoration.

Use the noOfLines prop to truncate the text with a specific number of lines.

To override the element that gets rendered, use the asChild.

• color
  Description The CSS `color` property

  Type

  "inherit" | "black" | "white" | "current" | "transparent" | "product-facebook" | "product-google" | "product-linkedin" | "product-pinterest" | "product-twitter" | "product-youtube" | ... 145 more ...

  Default

  black
• children required
  Description The text children

  Type

  ReactNode
• asChild
  Description Change the component to the HTML tag or custom component of the only child

  Type

  boolean
• align
  Description The CSS `text-align` property

  Type

  "center" | "right" | "left" | "start" | "end" | "justify"
• transform
  Description The CSS `text-transform` property

  Type

  "none" | "uppercase" | "lowercase" | "capitalize"
• size
  Description The Text size

  Type

  "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl"

  Default

  lg
• decoration
  Description The CSS `text-decoration-line` property

  Type

  "none" | "underline" | "overline" | "line-through"
• noOfLines
  Description The CSS `line-clamp` property

  Type

  number
• weight
  Description The CSS `font-weight` property

  Type

  "black" | "thin" | "extralight" | "light" | "normal" | "medium" | "semibold" | "bold" | "extrabold"

  Default

  normal
• isItalic
  Description The CSS `font-style` property

  Type

  boolean

  Default

  false