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>
))}
</>
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>
Alignment
<>
{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>
))}
</>
<>
<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>
</>
Font Family
Use fontFamily to enable other Atlassian font families like Atlassian Monospace.
<><Text color='body' fontFamily='mono'>Monospace A1B2C3D4E5</Text><Text color='body'>Regular A1B2C3D4E5</Text></>
Font Settings
Use fontSetting to enable advanced OpenType settings like tnum for tabulated (monospaced) numbers
<Text color='body' fontSetting='tnum'>02:03:04</Text>
Ellipsis
<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>
Wrapping
No wrap
Use noWrap to prevent the text from wrapping and truncating. This does not work if hasEllipsis is enabled.
<Text noWrap>
{demoText.long}
</Text>
Overflow wrap
Use overflowWrap to control how long words or URLs wrap in narrow containers.
<Arrange gap="medium" columns="1fr 1fr 1fr">
<Container width="min-content" maxWidth="180px" padding="small" borderSide="all">
<Text size="small" color="bodyDimmed">normal — default</Text>
<Text overflowWrap="normal">
https://example.com/very/long/url/that-overflows
</Text>
</Container>
<Container width="min-content" maxWidth="180px" padding="small" borderSide="all">
<Text size="small" color="bodyDimmed">break-word — URLs, long tokens</Text>
<Text overflowWrap="break-word">
https://example.com/very/long/url/that-overflows
</Text>
</Container>
<Container width="min-content" maxWidth="180px" padding="small" borderSide="all">
<Text size="small" color="bodyDimmed">anywhere — minimize overflow</Text>
<Text overflowWrap="anywhere">
https://example.com/very/long/url/that-overflows
</Text>
</Container>
</Arrange>
Props
fontFamily
'sans-serif' | 'mono'
'sans-serif'
fontWeight
'book' | 'regular' | 'medium' | 'bold'
'regular'
htmlTag
'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'span' | 'div'
'span'
fontSetting
'tnum' | 'normal'
'normal'
variant
'body' | 'title' | 'mainTitle'
alignment
'left' | 'right' | 'center'
overflowWrap
'normal' | 'break-word' | 'anywhere'