papillon-alerts v1.0.52
Papillon Alerts
Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don’t show more than one at a time.
This repository is a module of the full papillon repository.
Install
This repository is distributed with npm. After installing npm, you can install papillon-alerts
with this command.
$ npm install --save papillon-alerts
Explorer
Check out how to use Papillon Alerts with React 16, Webpack 4 and Babel 7 here
NPM
Get the latest papillon-alerts here
Usage
You can import it like this.
import { FlashAlert, FlashMessages } from 'papillon-alerts'
Documentation
Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don't show more than one at a time.
Default
Flash messages start off looking decently neutral—they're just light blue rounded rectangles.
<FlashAlert>
Flash message goes here.
</FlashAlert>
You can put multiple paragraphs of text in a flash message—the last paragraph's bottom margin
will be automatically override.
<FlashAlert>
<p>
This is a longer flash message in it's own paragraph. It ends up looking something like this. If we keep adding more text,
it'll eventually wrap to a new line.
</p>
<p>And this is another paragraph.</p>
</FlashAlert>
Should the need arise, you can quickly space out your flash message from surrounding content with a .flash-messages
wrapper. Note the extra top and bottom margin in the example below.
<FlashMessages>
<FlashAlert>
Flash message goes here.
</FlashAlert>
</FlashMessages>
Variations
Add .flash-warn
, .flash-error
, or .flash-success
to the flash message to make it yellow, red, or green, respectively.
<FlashAlert className="flash-warn">
Flash message goes here.
</FlashAlert>
<FlashAlert className="flash-error">
Flash message goes here.
</FlashAlert>
<FlashAlert className="flash-success">
Flash message goes here.
</FlashAlert>
With icon
Add an icon to the left of the flash message to give it some funky fresh attention.
<FlashAlert icon="alert">
Flash message with an icon goes here.
</FlashAlert>
With dismiss
Add a JavaScript enabled (via Crema) dismiss (close) icon on the right of any flash message.
<FlashAlert>
<button
className="flash-close js-flash-close"
type="button"
onClick={() => {}}
>
<Octicon size='small' icon={getIconByName('x')} />
</button>
Dismissable flash message goes here.
</FlashAlert>
With action button
A flash message with an action button.
<FlashAlert>
<button
type="submit"
className="btn btn-sm primary flash-action"
onClick={() => {}}
>
Complete action
</button>
Flash message with action here.
</FlashAlert>
Full width flash
A flash message that is full width and removes border and border radius.
<div className="container-lg">
<FlashAlert className="flash-full">
Full width flash message.
</FlashAlert>
</div>
License
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago