LanguageBanner
Tells the reader what happens to a translation: downloading, offline, failed or ready. It can repeat the message in a second language while the first is still missing.
- LanguageBanner
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, LanguageBanner
Dark theme, LanguageBanner
High contrast theme, LanguageBanner
UsageLink to the section Usage
import { LanguageBanner } from '@skribly/ui/navigation'<LanguageBanner state="offline" title="Offline" onDismiss={hide} dismissLabel="Dismiss"
secondary={{ lang: 'pl', text: 'Brak internetu.' }}>
The translation downloads once you are online.
</LanguageBanner>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 polite status region, so it never interrupts; keep it mounted and change its state so screen readers hear the update.
- Each state has its own icon and a title word as well as a colour.
- It never hides itself: it stays until the state changes or the reader dismisses it.
- The floating placement spans the width on narrow screens.
This demo runs through axe in all three themes on every test run. See what the tests check.