A read-only primitive that turns a raw byte count into a human-scaled size string. It picks the largest unit that keeps the value compact, rounds to the requested precision, and exposes the exact byte count in the element title so the precise figure stays reachable. Choose the binary base (KiB / MiB / GiB, 1024) for disk and memory figures, or the decimal base (KB / MB / GB, 1000) for storage-vendor and network numbers.
Readiness
complete
Preview
live
Props
3
Examples
3
Code
implementation mapped
When to use
File / attachment / upload sizes in lists and detail panels
Memory, cache, or disk-usage figures on operational dashboards
Quota and limit displays where the raw byte count is too noisy
Response / payload sizes in request inspectors
When not to use
A precise byte count that must never be rounded — show the integer
Throughput over time (bytes/sec) — use a rate-specific formatter
Editable size input — this primitive is display-only
Accessibility
Role: presentation
No keyboard shortcuts
Screen reader: Reads the scaled value and unit (e.g. "1.2 GiB"). The exact byte count is provided via the element title for users who need the precise figure.
Notes: Display-only; no focus or interaction model.
Props
Name
Type
Default
Description
value
number
0
Raw byte count to format.
base
enum: binary | decimal
binary
precision
integer
1
Decimal places for scaled values (raw bytes stay whole).
A read-only primitive that renders a monetary amount with its currency symbol and a grouped, fixed-precision body. It maps common ISO-4217 codes to symbols (USD, EUR, GBP, JPY, …) and falls back to a code prefix for anything unrecognised so the unit is never silently lost. Negative amounts render with a leading minus before the symbol.
Readiness
complete
Preview
live
Props
3
Examples
3
Code
implementation mapped
When to use
Prices, plan tiers, and line items in billing UI
Invoice totals and subtotals
Usage-cost figures on cost dashboards
Wallet / balance displays
When not to use
Editable amount input — this primitive is display-only
Non-monetary numbers — use NumericValue
A bare percentage or ratio — use Percent
Accessibility
Role: presentation
No keyboard shortcuts
Screen reader: An aria-label spells the amount with the currency name (e.g. "1,234.50 US dollars") so the value is announced unambiguously rather than as a bare symbol glyph.
Notes: Display-only; no focus or interaction model.
A read-only primitive that turns a seconds value into a readable duration. The compact form drops zero segments (90s → "1m 30s", 3600s → "1h") and falls back to milliseconds under a second; the clock form is the fixed-width digit form for timers and media positions. Negative spans render with a leading minus.
Readiness
complete
Preview
live
Props
2
Examples
3
Code
implementation mapped
When to use
Execution / run durations on activity and run views
Latency and timing figures in request inspectors
Elapsed-time readouts on live timers (clock form)
Cache TTLs and schedule intervals
When not to use
An absolute timestamp — use a date/time formatter
A time-ago relative to now — use RelativeTime
Editable duration input — this primitive is display-only
Accessibility
Role: presentation
No keyboard shortcuts
Screen reader: The aria-label is always the fully-spelled form ("3 minutes 14 seconds") so the clock form (02:14) is not announced digit-by-digit.
Notes: Display-only; no focus or interaction model.
A read-only primitive that renders a number with a thousands separator and an optional fixed decimal precision. Grouping uses the en-US convention the rest of the portal assumes (comma thousands, dot decimal). Disable grouping for values that must read as bare digits — identifiers, years, ports. The unformatted value is kept in the element title.
Readiness
complete
Preview
live
Props
3
Examples
3
Code
implementation mapped
When to use
Counts and totals on dashboards and stat cards
Aggregate metrics in tables (with tabular alignment)
Any large integer or decimal that benefits from grouping
Fixed-precision figures (e.g. always two decimals)
When not to use
Money — use Currency (symbol + minor-unit precision)
A ratio shown as a percentage — use Percent
Byte sizes — use Bytes (unit scaling)
Identifiers where commas would corrupt meaning — set group=false
Accessibility
Role: presentation
No keyboard shortcuts
Screen reader: Reads the grouped number naturally; the raw unformatted value is preserved in the element title for users who need to copy it.
Notes: Display-only; no focus or interaction model.
Props
Name
Type
Default
Description
value
number
0
The number to format.
precision
integer
—
Fixed decimal places. Omit to keep natural precision.
A read-only primitive for percentages that are already in percent units (12.5 → "12.5%"). With directional tone on, the sign drives the colour (positive → good, negative → bad, zero → neutral); with signed on, positive values get a leading "+". Direction is always redundantly encoded in the sign glyph and the spelled aria-label so it survives for colourblind and screen-reader users.
Readiness
complete
Preview
live
Props
4
Examples
3
Code
implementation mapped
When to use
Change / delta indicators on dashboards (+12.5%, -3.2%)
Success / error rates and conversion figures
Progress or utilisation percentages
Trend cells in metric tables
When not to use
A raw ratio that is not a percentage — use NumericValue
A progress bar — use a progress component, not bare text
Money — use Currency
Accessibility
Role: presentation
No keyboard shortcuts
Screen reader: The aria-label spells the sign as a word ("plus 12.5 percent" / "minus 3.2 percent") because a bare "+" is silent or mispronounced by some screen readers.
Notes: Tone colour is decorative — direction is also carried by the sign glyph and the spelled label, so colourblind users are not excluded.
Props
Name
Type
Default
Description
value
number
0
Percentage value, already in percent units (12.5 → 12.5%).
A read-only primitive that renders an event age as a relative phrase ("just now", "5 minutes ago", "in 2 days"). The input is a relative delta in seconds — not an absolute epoch resolved against the client clock — so the SSR and hydrated renders stay byte-identical. When refresh is on, a client-only interval advances the displayed age; the interval handle is cleared on cleanup so the timer never outlives the component.
Readiness
complete
Preview
live
Props
3
Examples
3
Code
implementation mapped
When to use
Activity / audit timestamps ('updated 5m ago')
List rows where recency matters more than the exact time
Notification and inbox item ages
Live-updating 'last seen' indicators
When not to use
An exact timestamp the user must read precisely — show the date
A fixed elapsed span (not relative to now) — use Duration
Editable date input — this primitive is display-only
Accessibility
Role: presentation
No keyboard shortcuts
Screen reader: Rendered inside a <time> element with the absolute timestamp in datetime / title so the precise value stays reachable for screen- reader and hover users.
Notes: Display-only; no focus or interaction model.
Props
Name
Type
Default
Description
seconds
integer
0
Event age in seconds at render (positive = past, negative = future).
