RefusalNotice
StableA calm notice for a request the assistant will not do, with an optional alternative.
Also known as refusal, declined request, content policy message
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Reason and alternative
I can't help with that
I can't write messages that pretend to be a real person.
I can write a clearly labeled template you can edit.
<RefusalNotice
reason="I can't write messages that pretend to be a real person."
alternative="I can write a clearly labeled template you can edit."
/>Offer something useful the assistant can do instead.
When to use it
Explains calmly that the assistant will not do something. It uses the info color, not red or amber, because a refusal is not an error.
Made of: Info icon · Title · Reason · Something else to try
Use it for
- A request the assistant declines, with the reason.
- Offering an allowed alternative next to the refusal.
Not for
- Something that broke and can be tried again: use ErrorState.
- A usage limit: use RateLimitNotice.
Do and avoid
I can't help with that
I can't book flights for other people.
I can share the booking link instead.
Error
Do
- Say calmly, in one sentence, what you can't do.
- Offer something else whenever you can.
- Keep the calm tone. The colors are chosen on purpose.
Avoid
- Do not use red or amber. A refusal is not a failure.
- Do not lecture or repeat the request back at length.
- Do not use it when something broke. Use ErrorState.
On a phone
- The reason and the alternative wrap to the screen width.
- It fills the width of its container.
- It has no buttons of its own. If you pass an alternative with a link, give the link the tap class so it has a 44px tap area.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| reasonrequired | string | none | Short explanation of the boundary. |
| alternative | ReactNode | none | Optional paragraph offering what can be done instead. |
"Show code under the preview gives the code for the example on the stage."
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.
- alternative
- Pass alternative to add a second line suggesting what to do instead.
Tokens
Change one of these and every part that uses it follows.
--info-soft--info-fg
Built in
- Screen readers announce it politely when it appears.
- The title "I can't help with that" is written in words. The icon is hidden from screen readers.
What you need to do
- Write a reason that names the boundary, because the title is always the same.
- Give any link or button in the alternative a clear name.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide