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

<Flash my={3} variant="danger"> This is a primary alert with an <Flash.Link> example link</Flash.Link>. Give it a click if you like. </Flash>

<Flash my={3} variant="danger">
  This is a primary alert with an
  <Flash.Link> example link</Flash.Link>. Give it a click if you like.
</Flash>

Result

Loading...

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.