SaudiRiyal
React SaudiRiyal component that renders the official Riyal symbol with SDGA-compliant amount formatting: fixed symbol position, RTL-safe sign, numerals, and tones.
SaudiRiyal pins the official Riyal glyph before the number in both directions, keeps the digits left to right, and announces the currency to screen readers. Pass a number to format it.
When to use
Use SaudiRiyal for every monetary amount in a Saudi service: fees, fines, balances, and totals. Pass a number and let the component place the symbol, format the digits, and handle negatives.
Use the symbol alone in column headers or labels.
Examples
Props
Props declared by SaudiRiyal. Native attributes of the underlying element pass through.
<SaudiRiyal>
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "lg" | "base" | "xs" | "xl" | "2xl" | "3xl" | "2xs" | ||
tone | "default" | "error" | "success" | "inverted" | "brand" | "muted" | ||
value | string | number | The amount. A number is formatted (grouping, decimals, numerals); a string renders as-is (e.g. "123 million"). | |
decimals | number | Fixed fraction digits (e.g. 2 → halalas). Omit to use the locale default. Numbers only. | |
numerals | Numerals | 'latn' (matches SDGA examples); `'auto'` follows the locale. | Digit system for a numeric value. |
currencyLabel | react.ReactNode | Screen-reader currency name read after the amount. Defaults to a localized "Saudi Riyal". | |
asChild | boolean | Merge props onto a single child (e.g. an <a>) instead of a <span>. Content still comes from value. | |
children | react.ReactNode | Passthrough content when value is omitted (ignored in asChild mode, where the child is the wrapper element). |
<SaudiRiyalSymbol>
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "lg" | "base" | "xs" | "xl" | "2xl" | "3xl" | "2xs" | ||
tone | "default" | "error" | "success" | "inverted" | "brand" | "muted" | ||
appearance | "plain" | "coin" |
Accessibility
The amount is exposed as an image with an accessible name that reads the currency and value, and the symbol glyph is aria-hidden. Digits stay left to right in Arabic layouts, and negative amounts keep the sign on the correct side.
The component inherits font size so it scales with the surrounding text.