RiskLimits
StableThe limits that protect the person, with a kill switch that asks first, in place.
Also known as limits, guardrails, risk settings
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Normal
Risk limits
- Daily loss₹4,200 of ₹20,000
- Orders today6 of 25 orders
Exits are never blocked.
<RiskLimits limits={[
{ id: "loss", label: "Daily loss", used: 4200, max: 20000, format: (n) => "₹" + n.toLocaleString("en-IN") },
{ id: "orders", label: "Orders today", used: 6, max: 25, unit: "orders" },
]} note="Exits are never blocked." />Two limits well below their maximum. Money uses a format function.
When to use it
Shows how close the person is to their own limits, and gives one clear way to stop.
Made of: Heading and Paused tag · Reason · Limit label and numbers · Meter · Status tags · Note · Kill switch
Use it for
- Daily loss and order count limits in a trading app.
- A paused state that explains why in words.
- A stop-everything control that is safe to put on screen.
Not for
- A spending cap the person sets for an agent: use BudgetControl.
- A single progress bar: use Meter.
- A message that is not about limits: use Callout.
Do and avoid
Risk limits
- Daily loss₹17,000 of ₹20,000Near the limit
- Orders today6 of 25 orders
Exits are never blocked.
Do
- Say what stays possible, such as exits, in note.
- Pass the real used and max, and let the part word the status.
- Explain a pause with pausedReason.
- Keep the kill switch in the same place on every screen.
Avoid
- Do not make a one-tap kill switch.
- Do not add red or amber to the meters. This is a calm part.
- Do not hide a limit once it is reached.
- Do not use it to block exits.
On a phone
- The card fills the width of its container up to 430px, and each limit shows its label and amount on one row that wraps if needed.
- Stop trading, Keep trading and the first stop button are 48px tall on touch screens.
- The confirmation shows in the card itself, not in a popup, so nothing covers the limits.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| limitsrequired | { id: string; label: string; used: number; max: number; unit?: string; format?(n: number): string }[] | none | One row per limit. format turns a number into text, for money. |
| paused | boolean | none | True when trading is stopped. Every limit then says Paused, and the kill switch is not shown. |
| pausedReason | string | none | Why it is paused, in words. |
| onKill | () => void | none | Called only after the person answers Stop trading. Without it, no kill switch is shown. |
| killLabel | string | "Stop all trading" | Text of the kill button, also used in the question. |
| note | ReactNode | none | A line under the limits, such as Exits are never blocked. |
| className | string | none | Extra classes for the card. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one RiskLimits switches all of this from its properties panel, across 2 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Paused | paused | On or off |
| Note | note | Any text |
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- near the limit
- At 80 percent used or more, a limit shows Near the limit with an info icon in a calm tone.
- limit reached
- At 100 percent or more, a limit shows Limit reached with a lock icon. The meter is capped at full.
- paused
- Pass paused. A Paused tag shows at the top and on each limit, the reason shows in words and the kill switch is removed.
- asking
- Pressing the kill switch swaps it for a question with Stop trading and Keep trading. Focus moves to Keep trading, and Escape also keeps trading.
Tokens
Change one of these and every part that uses it follows.
--surface--surface-sunken--border--border-strong--text--text-muted--unsure-soft--unsure-fg--radius-card
Built in
- Each meter has the limit name and a text value such as 4,200 of 20,000.
- Near the limit, Limit reached and Paused are words with icons, never colour alone.
- The kill question appears in place as a named group. Focus moves to Keep trading, Escape also keeps trading, and focus goes back to the kill button.
- Stop trading and Keep trading are the same size and style.
- After trading stops, focus moves to the heading and a polite live region announces that trading is paused.
What you need to do
- Give each limit a clear label such as Daily loss.
- Pass a format function for money so the numbers read in your locale.
- Say in pausedReason why trading is paused.
- Keep exits open in your own logic and say so in note.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide