Text
The typography scale component. Renders any variant from the design system's type scale — display, heading, body, and eyebrow — with the correct size, weight, and line height from tokens.
Import
import { Text } from '@okapidev/mitek-ui';Display
Large-scale type for marketing and hero sections.
<Text variant="display-1">Display 1</Text>
<Text variant="display-2">Display 2</Text>
<Text variant="display-3">Display 3</Text>
<Text variant="display-4">Display 4</Text>
<Text variant="display-5">Display 5</Text>
<Text variant="display-6">Display 6</Text>Heading
Semantic headings for product UI and content hierarchy. Renders h1–h6 by default.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
<Text variant="heading-1">Heading 1</Text>
<Text variant="heading-2">Heading 2</Text>
<Text variant="heading-3">Heading 3</Text>
<Text variant="heading-4">Heading 4</Text>
<Text variant="heading-5">Heading 5</Text>
<Text variant="heading-6">Heading 6</Text>Body
Body text for UI copy. Renders <p> by default.
body-xl — Primary body copy, descriptions
body-l — Emphasized body, labels
body-m — Strong emphasis, use sparingly
body-base — Standard UI body text
body-s — Secondary labels, table headers
body-xs — Metadata, helper text
body-2xs — Captions, tagsbody-3xs — Fine print, footnotes<Text variant="body-xl">body-xl — Primary body copy</Text>
<Text variant="body-l">body-l — Emphasized body</Text>
<Text variant="body-m">body-m — Strong emphasis</Text>
<Text variant="body-base">body-base — Standard UI text</Text>
<Text variant="body-s">body-s — Secondary labels</Text>
<Text variant="body-xs">body-xs — Metadata, helper text</Text>
<Text variant="body-2xs">body-2xs — Captions, tags</Text>
<Text variant="body-3xs">body-3xs — Fine print</Text>Eyebrow
Uppercase label placed above headings. Use one per section maximum.
<Text variant="eyebrow">Section label</Text>
<Text variant="eyebrow" color="secondary">Subdued eyebrow</Text>Color
color="primary" — default text
color="secondary" — subdued text
color="disabled" — muted text
color="link" — link text
<Text variant="body-base" color="primary">Primary</Text>
<Text variant="body-base" color="secondary">Secondary</Text>
<Text variant="body-base" color="disabled">Disabled</Text>
<Text variant="body-base" color="link">Link</Text>Align
Left aligned text
Center aligned text
Right aligned text
<Text variant="body-base" align="left">Left</Text>
<Text variant="body-base" align="center">Center</Text>
<Text variant="body-base" align="right">Right</Text>as — semantic override
Override the default HTML element while keeping the visual style.
heading-2 style, rendered as h1
body-base style, rendered as spandisplay-5 style, rendered as p
{/* Style and semantics can be decoupled */}
<Text variant="heading-2" as="h1">Page title</Text>
<Text variant="body-base" as="label">Form label</Text>
<Text variant="display-5" as="p">Marketing headline</Text>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | TextVariant | 'body-base' | Typography scale variant |
color | 'primary' | 'secondary' | 'disabled' | 'inverse' | 'link' | 'inherit' | 'primary' | Text color |
align | 'left' | 'center' | 'right' | — | Text alignment |
as | ElementType | variant default | Override rendered HTML element |
className | string | — | Additional CSS class |
Default elements per variant
| Variant group | Default element |
|---|---|
display-1 … display-6 | <div> |
heading-1 … heading-6 | <h1> … <h6> |
body-xl … body-s | <p> |
body-2xs, body-3xs | <span> |
eyebrow | <span> |