Usage

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

Sizes

Weights

Semantic variants

Alignment

HTML tag

Change the HTML tag with htmlTag prop.


Color

Use one of the palette colors.

Ellipsis

Ellipsis lines

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

Props

name
type
default
size
'body-sm' | 'body-md' | 'body-lg' | 'heading-sm' | 'heading-md' | 'heading-lg' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge'
'body-md'
fontWeight
'book' | 'bold'
'book'
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
ellipsisLines
number
children
React.ReactNode
sizeMinMax
string[]