Flash

The Flash component informs users of successful or pending actions, or other state statuses.

Default example

Flash default
Flash green
Flash yellow
Flash red
Flash purple
<Flash m={4}>Flash default</Flash>
<Flash m={4} scheme="green">Flash green</Flash>
<Flash m={4} scheme="yellow">Flash yellow</Flash>
<Flash m={4} scheme="red">Flash red</Flash>
<Flash m={4} scheme="purple">Flash purple</Flash>

Full(-width) example

Full-width via the full prop spans a Flash across the entire region (horizontally), removing the side borders, radius and corresponding marginal-space.

Flash default
Flash green
Flash yellow
Flash red
Flash purple
<Flash m={4} full>Flash default</Flash>
<Flash m={4} scheme="green" full>Flash green</Flash>
<Flash m={4} scheme="yellow" full>Flash yellow</Flash>
<Flash m={4} scheme="red" full>Flash red</Flash>
<Flash m={4} scheme="purple" full>Flash purple</Flash>

Outline example

Flash black outline
Flash gray outline
Flash green outline
Flash purple outline
Flash red outline
<Flash m={4} outline='black'>Flash black outline</Flash>
<Flash m={4} outline='gray'>Flash gray outline</Flash>
<Flash m={4} outline='green'>Flash green outline</Flash>
<Flash m={4} outline='purple'>Flash purple outline</Flash>
<Flash m={4} outline='red'>Flash red outline</Flash>

System props

Flash components get BORDER, COMMON and VARIENT-related system props. Read the System Props doc page for a full list of available props.

Component props

NameTypeDefaultDescription
schemeStringgrayCan be one of green, yellow, red or any of the other color definitions as defined in the theme's flashStyles dictionary, which sets the background color, border, and text color of the Flash component
outlineStringdefault