Guides
Get started Component definition Designing custom elements Development best practices
Styles
Colors Typography Spacing Shadows Radii
Components
Avatar Button Checkbox ColorPicker Dropdown FormField Icon IconButton Illustration Link List Loader Logo LogoLoader Menu Modal NotificationBar Pill Radio Select Skeleton Switch Tabs Text Textarea TextButton TextInput Toast Tooltip
Layout
Align Arrange Backdrop Container ErrorContainer Popover Spacer Split
Icons
Icon set
Illustrations
Illustration set
Patterns
Disabled styles Errors Forms Discovery Plan upgrade Settings
Utilities
CSS utilities CSS variables Responsive
Playground
Layout recipes Showcase

Text

Usage

import { Text } from '@loomhq/lens'
<Text>Content</Text>

Sizes

Heading sizes will always be in bold (even if a different fontWeight is applied).

<>
  {availableSizes.map((size, index) => (
    <Text size={size} key={index}>
      Size {size}
    </Text>
  ))}
</>

<>
  {availableSizes.map((size, index) => (
    <Text size={size} key={index}>
      Size {size}
    </Text>
  ))}
</>

Weights

Book weight will be renamed as regular weight to match Atlassian Design System.

Semantic variants

<Arrange gap="small" columns="1fr">
  <Text variant='mainTitle'>Variant mainTitle — {demoText.title}</Text>
  <Text variant='title'>Variant title — {demoText.medium}</Text>
  <Text variant='body'>Variant body — {demoText.long}</Text>
</Arrange>

<Arrange gap="small" columns="1fr">
  <Text variant='mainTitle'>Variant mainTitle — {demoText.title}</Text>
  <Text variant='title'>Variant title — {demoText.medium}</Text>
  <Text variant='body'>Variant body — {demoText.long}</Text>
</Arrange>

Alignment

<>
  {alignments.map((alignment, index) => (
    <Container borderSide="bottom" key={index}>
      <Text alignment={alignment}>
        Align {alignment}
      </Text>
    </Container>
  ))}
</>

<>
  {alignments.map((alignment, index) => (
    <Container borderSide="bottom" key={index}>
      <Text alignment={alignment}>
        Align {alignment}
      </Text>
    </Container>
  ))}
</>

HTML tag

Change the HTML tag with htmlTag prop.

<>
  {availableHtmlTags.map((tag, index) => (
    <Text htmlTag={tag} key={index}>
      Tag {tag}
    </Text>
  ))}
</>

<>
  {availableHtmlTags.map((tag, index) => (
    <Text htmlTag={tag} key={index}>
      Tag {tag}
    </Text>
  ))}
</>

<>
  <Text htmlTag='h2' variant='title'>
    Text with h2 tag and title variant
  </Text>
  <Text htmlTag='h4' size='xxlarge'>
    Text with h4 tag and size xxlarge
  </Text>
</>

<>
  <Text htmlTag='h2' variant='title'>
    Text with h2 tag and title variant
  </Text>
  <Text htmlTag='h4' size='xxlarge'>
    Text with h4 tag and size xxlarge
  </Text>
</>

Color

Use one of the palette colors.

<>
  <Text color='body'>Text with color</Text>
  <Text color='bodyDimmed'>Text with color</Text>
  <Text color='orange'>Text with color</Text>
</>

<>
  <Text color='body'>Text with color</Text>
  <Text color='bodyDimmed'>Text with color</Text>
  <Text color='orange'>Text with color</Text>
</>

Ellipsis

<Text hasEllipsis>
  {demoText.long}
</Text>

<Text hasEllipsis>
  {demoText.long}
</Text>

Ellipsis lines

Use hasEllipsis and ellipsisLines to display multiple lines of text with ellipsis.

<Text hasEllipsis ellipsisLines={2}>
  {demoText.long}
</Text>

<Text hasEllipsis ellipsisLines={2}>
  {demoText.long}
</Text>

No Wrap

Use noWrap if you would like your text to not to not wrap and truncate. Does not work if hasEllipsis is enabled.

<Text noWrap>
  {demoText.long}
</Text>

<Text noWrap>
  {demoText.long}
</Text>

Props

name

type

default

size

TextSize

'body-md'

fontWeight

'book' | 'regular' | 'medium' | 'bold'

'regular'

htmlTag

'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'span' | 'div'

'span'

variant

'body' | 'title' | 'mainTitle'

alignment

'left' | 'right' | 'center'

color

string

isInline

boolean

isDimmed

boolean

hasEllipsis

boolean

noWrap

boolean

ellipsisLines

number

children

React.ReactNode

sizeMinMax

string[]

className

string

Guides

Styles

Components

Layout

Icons

Illustrations

Patterns

Utilities

Playground

Text

Usage

Sizes

Weights

Semantic variants

Alignment

HTML tag

Color

Ellipsis

Ellipsis lines

No Wrap

Props