Flash

Design

Interface guidelines Octicons Prototyping Presentations

Development

Primer CSS Primer Components

About

Table of contents

Default example
With an icon
System props
Component props

Table of contents

Default example
With an icon
System props
Component props

The Flash component informs users of successful or pending actions.

Default example

Default Flash

Success Flash

Warning Flash

Danger Flash

<Flash>Default Flash</Flash>
<Flash variant="success">Success Flash</Flash>
<Flash variant="warning">Warning Flash</Flash>
<Flash variant="danger">Danger Flash</Flash>

<Flash>Default Flash</Flash>
<Flash variant="success">Success Flash</Flash>
<Flash variant="warning">Warning Flash</Flash>
<Flash variant="danger">Danger Flash</Flash>

With an icon

Flash components with icons inside of them will automatically set the correct color for the icon depending on the type of Flash, as well as applying the correct right margin.

Success!

<Flash variant="success">
  <StyledOcticon icon={Check}/>
  Success!
</Flash>

<Flash variant="success">
  <StyledOcticon icon={Check}/>
  Success!
</Flash>

System props

Flash components get COMMON system props. Read our System Props doc page for a full list of available props.

Component props

Name	Type	Default	Description
full	Boolean		Creates a full width Flash component
variant	String	default	Can be one of `default`, `success`, `warning`, or `danger` - sets the background color and border of the Flash component

Edit this page on GitHub

1 contributor

Last edited by emplums on April 23, 2020