Display
Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.
A hero figure, far larger than any heading, for the one number a widget is read for: a temperature, an index, a price.
Figures keep the same width as they change, and the box is exactly as tall as the type, so a
size="lg" figure always takes the same room in your layout. Add a unit to set a suffix such as
°C or % smaller beside the number, a prefix to set a sign such as $ smaller in front of it,
and a symbol for a mark such as ° that should stay as large as the number.
Import
import { Display } from "~lib/typography";
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
children | ReactNode | Yes | N/A | The figure to display |
size | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | No | "md" | Figure size |
weight | "medium" | "semibold" | "bold" | No | "bold" | Font weight |
align | "left" | "center" | "right" | No | Inherited | Text alignment |
prefix | string | No | N/A | Sign set smaller before the figure |
symbol | string | No | N/A | Mark kept at the figure's size, before the unit |
unit | string | No | N/A | Suffix set smaller after it |
truncate | boolean | No | false | Truncate overflow with "…" |
lines | number | No | N/A | Wrap a sentence at words, at most this many lines |
fit | "content" | "fill" | number | No | "content" | Container height behavior |
inline | boolean | No | false | Only as wide as the figure, for a row |
reading | string | No | N/A | A reading set small above the figure (ruby text) |
Sizes: xs is as large as the largest Heading, for a slim column where anything bigger
would not fit; from sm up every size is well above it, each a step up from the last. The
figure's box is exactly as tall as its font size.
Examples
Default
With a Unit
With a Prefix
A price reads with its currency sign in front. Put the sign in prefix rather than in the number:
it is set smaller and lighter, like a unit, so it takes little of the figure's width. It works
for the plus or minus of a change too.
<Display prefix="$">1,204.56</Display>
<Display prefix="+" unit="%">2.4</Display>
With a Symbol
A unit is set smaller, so in "16°C" the degree sign would shrink along with the letter and read
as a stray dot. Put it in symbol instead: it stays as large as the number, and the unit follows
it.
<Display symbol="°" unit="C">
16
</Display>
Sizes
xs keeps a price in a slim column without giving up the display's figures.
Lighter Weight
Centered
Set align to center or right-align the figure. Leave it unset and it follows the alignment of
whatever it sits in.
Beside an Icon
A figure is as wide as whatever it sits in, so in a row beside an Icon it would push the icon
to the edge. Set inline to make it only as wide as the number, so the two center together.
<div className="flex items-center justify-center gap-3">
<Icon name="leaf" size={56} />
<Display size="lg" inline>
42
</Display>
</div>
Truncated
A figure too wide for its box ends in "…" instead of spilling out. Truncation needs a fixed
height (fit={72}) or fit="fill" inside a flex column of fixed height. A fill box also cuts
anything it has no room for at its own edge, while leaving room for the ink a solid-set figure
draws past its line, so a figure that fits keeps its descenders.
A Sentence Over a Few Lines
Set lines to set a sentence as a figure, such as a message or a riddle: it wraps between words
and ends in "…" after the last whole word that fits that many lines. The box is as tall as the
lines it shows, each as tall as the figure's size, and the descenders of the last one still draw.
truncate gives way to lines, and a unit after a sentence cut short is dropped with the rest.
<Display size="sm" lines={3}>
{riddle}
</Display>
With a Reading
Set reading to print a reading small above the figure, as the kana reading of a Japanese word is
printed over its kanji. The reading is set at about half the figure's size, and the figure's box
grows by that one line, so a plan budgets it as the figure's size plus the reading's. A unit still
sits after the figure on its baseline. The figure and its reading are set as one block, so
truncate and lines do not cut it.
<Display size="lg" reading="にほん">
日本
</Display>