Components
Text
Typography component with text style presets and semantic HTML support
Overview
A component for rendering text. Uses text style presets from @illog/themes to provide consistent typography.
Text Styles
| Style | Size | Weight | Line Height | Use Case |
|---|---|---|---|---|
title | 48px | bold | 1.2 | Page title |
subtitle | 32px | semiBold | 1.2 | Section heading |
heading | 24px | semiBold | 1.2 | Content heading |
subheading | 20px | regular | 1.2 | Subheading |
bodyBase | 16px | regular | 1.4 | Default body text |
bodyStrong | 16px | semiBold | 1.4 | Emphasized body text |
bodySmall | 14px | regular | 1.4 | Small body text |
bodySmallStrong | 14px | semiBold | 1.4 | Small emphasized body text |
caption | 12px | regular | 1.4 | Caption, label |
captionStrong | 12px | semiBold | 1.4 | Emphasized caption |
Colors
<Text color="textDefaultDefault">Default</Text>
<Text color="textDefaultTertiary">Secondary</Text>
<Text color="textBrandDefault">Brand</Text>
<Text color="textDangerDefault">Danger</Text>
<Text color="textDefaultDisabled">Disabled</Text>Props
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | 'p' | HTML element |
textStyle | string | 'bodyBase' | Text style preset |
color | string | 'textDefaultDefault' | Text color token |
align | 'left' | 'center' | 'right' | — | Text alignment |
truncate | 'true' | — | Single-line truncation |
lineClamp | '1' | '2' | '3' | — | Multi-line truncation |
children | ReactNode | — | Text content |
Usage
import { Text } from '@illog/ui'
// Semantic HTML
<Text as="h1" textStyle="title">Page Title</Text>
<Text as="span" textStyle="caption" color="textDefaultDisabled">Secondary text</Text>
// Truncation
<Text truncate="true">Very long text will be truncated...</Text>
<Text lineClamp="2">Multi-line text will display up to 2 lines...</Text>