Flash
Use the Flash component for delivering important messages to your users while allowing them to continue interacting with the rest of the page. For example, you may want to let users know they're on the wrong network but allow them to continue browsing until they try to connect. The Flash renders a responsive box-model layout component. Inherits props from Box component.
Usage example#
Live Editor
Result
Accessibility#
Critical and warning banners have a role="alert"
All other banners have a role="status"
Banner containers have a tabindex="0" and display a visible keyboard focus indicator.
Banners use aria-describedby to describe their purpose to assistive technologies when they're announced or receive focus. All of the banner content is used for the aria-describedby.
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| border | string (optional) | '1' | |
| borderRadius | integer (optional) | 1 | |
| p | string (optional) | '3' | |
| variant | enum (optional) | 'base' | Sets the colors of the background, text and links. Allowed values: 'base' 'success' 'warning' 'danger' 'info'. |
| width | string (optional) | '100%' | Sets width. |
Flash uses COMMON, LAYOUT, POSITION, FLEXBOX, BORDERS groups of Styled System props.