SpendThresholdNotice
Tell the user that spending in the session passed a threshold: You've spent $20.40 in this session. Your limit is $50.00.. Money is formatted with Intl.NumberFormat using currency and locale. Add buttons with actions (primary or secondary), extra text with description, and a close button with onDismiss. Use getReachedThreshold(amount, thresholds) to decide when to show it and remember which threshold was dismissed. Shares its look with IdleReturnPrompt; actions wrap below the text in narrow containers. formatSpend is exported for use in your own text.
Getting Started
$pnpm add @sinups/ai-kit @mantine/core @mantine/hooks @tabler/icons-reactExamples
Wide
Narrow, other currency
API reference
Prop
Type
Required
amount
number
Yes
Money spent in this session
currency
string
No
ISO 4217 currency code, `USD` by default
locale
string
No
BCP 47 locale used to format money, `en` by default
limit
number
No
Spending limit, shown in the description when set
description
React.ReactNode
No
Extra explanation after the title
actions
SpendThresholdNoticeAction[]
No
Buttons, for example View usage or Set a limit
onDismiss
() => void
No
Renders a close button when set
labels
Partial<SpendThresholdNoticeLabels>
No
Overrides of the default English labels
className
string
No
Class name added to the root element
style
React.CSSProperties
No
Inline styles added to the root element