FlashMessages
Messages the server left for the next page, such as "Saved" after a redirect or the errors of a form. Pick it for server-rendered results; use useToast for results of actions on the client.
- FlashMessages
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, FlashMessages
Success: Profile saved
Dark theme, FlashMessages
Success: Profile saved
High contrast theme, FlashMessages
Success: Profile saved
UsageLink to the section Usage
import { FlashMessages } from '@skribly/ui/feedback'<FlashMessages
messages={[{ id: 'saved', tone: 'ok', title: 'Profile saved' }]}
toneLabels={{ ok: 'Success', info: 'Information', warn: 'Warning', danger: 'Error' }}
onDismiss={remove}
dismissLabel="Close message"
focusError
/>Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- Messages already in the page when it loads are not read by live regions, so each one is also written into a polite region after mount, and errors into an assertive one. focusError moves focus to the first error instead, which suits a form that came back from the server.
- Each message is read once and never closes on its own.
This demo runs through axe in all three themes on every test run. See what the tests check.