Text
Text — the one component every string in the app goes through, instead of a <p>, a <span> or a <div> with a size class on it.
Try it
The quick brown fox jumps over the lazy dog.
Knobs
variant Role and size — the type token minus text-. Pick by the job the text does: display is the one hero number on a screen, headline titles a page or section, title titles a card or dialog, body is prose and cell contents, label is buttons, chips, tabs and column headers.
tone Colour role. Inherits from the surface unless you say otherwise.
weight Overrides the weight the variant already carries. Rarely needed.
align Logical, so it follows the writing direction.
wrap Overrides the wrapping the variant sets.
font Family. Inherits unless set; Arabic swaps itself out already.
<script> import { Text } from 'omaris';</script><Text>The quick brown fox jumps over the lazy dog.</Text>Walkthrough
1. Basic
variant is how it looks, as is what it means. Set both when they differ; leave one out and it is inferred — a heading tag picks its own role, and a variant on its own renders a paragraph.
Deployments
Every push to main builds and ships. The last ten are kept so you can roll back.
<script lang="ts"> import { Text } from 'omaris';</script><div class="flex max-w-md flex-col gap-2"> <Text as="h2">Deployments</Text> <Text tone="muted"> Every push to <code>main</code> builds and ships. The last ten are kept so you can roll back. </Text> <Text variant="label-sm" tone="muted" class="mt-2">Updated 4 minutes ago</Text></div>2. Scale
Five roles, three sizes each. The variant carries size, line height, letter spacing and weight together — if you find yourself adding font-semibold after it, the role is wrong, not the weight.
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
<script lang="ts"> import { Text } from 'omaris';</script><div class="flex w-full flex-col gap-4"> <div class="flex flex-col gap-1"> <Text variant="label-sm" tone="muted" font="mono">display-sm</Text> <Text variant="display-sm">The quick brown fox</Text> </div> <div class="flex flex-col gap-1"> <Text variant="label-sm" tone="muted" font="mono">headline-md</Text> <Text variant="headline-md">The quick brown fox</Text> </div> <div class="flex flex-col gap-1"> <Text variant="label-sm" tone="muted" font="mono">title-lg</Text> <Text variant="title-lg">The quick brown fox</Text> </div> <div class="flex flex-col gap-1"> <Text variant="label-sm" tone="muted" font="mono">body-md</Text> <Text variant="body-md">The quick brown fox</Text> </div> <div class="flex flex-col gap-1"> <Text variant="label-sm" tone="muted" font="mono">label-md</Text> <Text variant="label-md">The quick brown fox</Text> </div></div>3. Tone and truncation
Colour is inherited by default, so Text stays legible on any surface. tone is for text that carries meaning of its own, and lines clamps to a fixed number with an ellipsis.
Inherits the surface
No tone needed here.
A component library is a set of decisions someone already made, so that the next person does not have to make them again badly.
lines={2}A component library is a set of decisions someone already made, so that the next person does not have to make them again badly.
<script lang="ts"> import { Text } from 'omaris'; const NOTE = 'A component library is a set of decisions someone already made, so that the next person does not have to make them again badly.';</script><div class="flex w-72 max-w-full flex-col gap-4"> <div class="rounded-xl bg-primary p-3"> <Text variant="title-sm" class="text-primary-foreground">Inherits the surface</Text> <Text variant="body-sm" class="text-primary-foreground/80">No tone needed here.</Text> </div> <Text tone="destructive" variant="label-md">Card declined</Text> <div class="flex flex-col gap-1"> <Text variant="label-sm" tone="muted" font="mono">{'lines={1}'}</Text> <Text lines={1}>{NOTE}</Text> <Text variant="label-sm" tone="muted" font="mono">{'lines={2}'}</Text> <Text lines={2}>{NOTE}</Text> </div></div>4. Numbers
tabular gives the digits a fixed width, so a column of figures lines up and a live counter stops twitching as it changes.
48,210.00
1,119.40
47,090.60
<script lang="ts"> import { Text } from 'omaris';</script><div class="flex w-64 max-w-full flex-col gap-2"> <div class="flex items-baseline justify-between gap-4"> <Text variant="label-md" tone="muted">Revenue</Text> <Text variant="title-sm" tabular>48,210.00</Text> </div> <div class="flex items-baseline justify-between gap-4"> <Text variant="label-md" tone="muted">Refunds</Text> <Text variant="title-sm" tabular>1,119.40</Text> </div> <div class="flex items-baseline justify-between gap-4"> <Text variant="label-md" tone="muted">Net</Text> <Text variant="title-sm" tabular>47,090.60</Text> </div></div>