Alert
A message inside the content, next to what it is about. Pick it for a result that stays on screen, such as the error summary at the top of a form; pick a toast for news that may pass.
- Alert
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, Alert
Information: Imports run at night
Files added after 22:00 are imported the next morning.
Success: Invitation sent
Warning: Two people are editing this page
Error: Fix 2 fields to send the form
- Email address is missing
- Project name is longer than 80 characters, which is the most a project name can hold
Dark theme, Alert
Information: Imports run at night
Files added after 22:00 are imported the next morning.
Success: Invitation sent
Warning: Two people are editing this page
Error: Fix 2 fields to send the form
- Email address is missing
- Project name is longer than 80 characters, which is the most a project name can hold
High contrast theme, Alert
Information: Imports run at night
Files added after 22:00 are imported the next morning.
Success: Invitation sent
Warning: Two people are editing this page
Error: Fix 2 fields to send the form
- Email address is missing
- Project name is longer than 80 characters, which is the most a project name can hold
UsageLink to the section Usage
import { Alert } from '@skribly/ui/feedback'<Alert tone="danger" toneLabel={t('tone.error')} title="Fix 2 fields" headingLevel={2}>
<ul><li><a href="#email">Email address is missing</a></li></ul>
</Alert>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
- A static alert is a group named by its tone word and title. live="polite" makes it a status and live="assertive" (or urgent) an alert, so a message added after an action is read out; render the alert first and fill it later. headingLevel puts an error summary in the page outline, and links inside it can move focus to each field.
- The close button is a 24px or larger target and the message never closes on its own.
This demo runs through axe in all three themes on every test run. See what the tests check.