Banner
A full-width strip at the top of a page or panel for a state that lasts, such as read-only mode or a lost connection.
- Banner
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, Banner
Warning: Read-only mode
The plan has ended, so changes are not saved until it is renewed.
Error: You are offline
Changes are kept on this device and sent when the connection returns.
Information: A new version is ready
Page content
Dark theme, Banner
Warning: Read-only mode
The plan has ended, so changes are not saved until it is renewed.
Error: You are offline
Changes are kept on this device and sent when the connection returns.
Information: A new version is ready
Page content
High contrast theme, Banner
Warning: Read-only mode
The plan has ended, so changes are not saved until it is renewed.
Error: You are offline
Changes are kept on this device and sent when the connection returns.
Information: A new version is ready
Page content
UsageLink to the section Usage
import { Banner } from '@skribly/ui/feedback'<Banner tone="warn" toneLabel={t('tone.warning')} title="Read-only mode" sticky actions={<Button size="sm">Renew</Button>}>
Changes are not saved until the plan is renewed.
</Banner>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 region named by its tone word and title, so it is listed with the landmarks.
- Set live when the banner appears after the page loads, such as on losing the connection.
- Actions wrap under the text on narrow screens.
- The close button only hides it; the state it reports stays until it is fixed.
This demo runs through axe in all three themes on every test run. See what the tests check.