Welcome UI logo
FOUNDATIONSCOMPONENTSBLOG650+
10.0.0

Menu

    Actions

    • Button
    • ButtonGroup
    • Close Button
    • Link

    Data display

    • Accordion
    • Avatar
    • Badge
    • Card
    • Swiper
    • Table
    • Tag
    • VisuallyHidden

    Feedback

    • Alert
    • StickyNote

      NEW

    • Toast

    Forms

    • Checkbox
    • DatePicker
    • DateTimePicker
    • Field
    • FileDrop
    • FileUpload
    • Hint
    • InputText
    • Label
    • PasswordInput
    • Radio
    • RadioGroup
    • RadioTab
    • Search
    • Select
    • Slider
    • Textarea
    • TimePicker
    • Toggle

    Icons & logo

    • Icon
    • IconStamp

      NEW

    • Logo
    • VariantIcon
    • WelcomeLoader

    Layout

    • AspectRatio
    • Loader
    • Window

      NEW

    Navigation

    • Breadcrumb
    • DropdownMenu
    • Pagination
    • Stepper

      NEW

    • Tabs

    Overlay

    • Drawer
    • Modal
    • Popover
    • Tooltip

    Typography

    • Text

    Utilities

    • Grid background

Overview

Props

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
Github
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…

Github

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

Github

withDash

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

Github
TooltipGrid background utility

On this page

  • Definition
  • Examples
    • Overwrite tag
    • Truncation
    • withDash
Made with by
Welcome to the jungle logo

Documentations

  • Foundations
  • Components
  • Source code

Updates

  • Releases
  • Issues

Community

  • Github
  • Twitter
  • Medium
  • Jobs