Props
| Prop | Type | Required |
|---|---|---|
title | ReactNode | yes |
tone | 'note' | 'warn' | 'bad' | no |
mark | ReactNode | no |
list | readonly ReactNode[] | no |
children | ReactNode | no |
tone is which of the three this is — a remark, a caution, a refusal — and it
draws the rule down the side. A remark unless said otherwise. The rule carries
the tone and the words do not: a box filled with its own hue is the loudest
thing on a screen, which is how a reader learns to stop reading them.
The hue reaches nobody who cannot see it, and this ladder draws the caution and
the refusal at the same lightness, so the tone also sets the element's role —
note, status, alert — and the three are three distinct things to a screen
reader as well.
mark is a glyph at the leading edge, drawn by the caller in the tone's colour.
list renders as a <ul>, so a screen reader counts it and steps through it.
It is a separate prop from children because a <ul> is not a nesting a <p>
allows.
import { Notice } from "@luxfi/ui/read"<Notice title={t("swap.error.expectedToFail")} tone="bad">
{reason}
</Notice>