Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
primer-alerts
Advanced tools
Flash messages, or alerts, inform users of successful or pending actions.
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 primer-css repository.
This repository is distributed with npm. After installing npm, you can install primer-alerts
with this command.
$ npm install --save primer-alerts
The source files included are written in Sass (scss
) You can simply point your sass include-path
at your node_modules
directory and import it like this.
@import "primer-alerts/index.scss";
You can also import specific portions of the module by importing those partials from the /lib/
folder. Make sure you import any requirements along with the modules.
For a compiled css version of this module, a npm script is included that will output a css version to build/build.css
The built css file is also included in the npm package.
$ npm run build
Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don't show more than one at a time.
Flash messages start off looking decently neutral—they're just light blue rounded rectangles.
<div class="flash">
Flash message goes here.
</div>
You can put multiple paragraphs of text in a flash message—the last paragraph's bottom margin
will be automatically override.
<div class="flash">
<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>
</div>
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.
<div class="flash-messages">
<div class="flash">
Flash message goes here.
</div>
</div>
Add .flash-warn
, .flash-error
, or .flash-success
to the flash message to make it yellow, red, or green, respectively.
<div class="flash flash-warn">
Flash message goes here.
</div>
<div class="flash flash-error">
Flash message goes here.
</div>
<div class="flash flash-success">
Flash message goes here.
</div>
Add an icon to the left of the flash message to give it some funky fresh attention.
<div class="flash">
<%= octicon "alert" %>
Flash message with an icon goes here.
</div>
Add a JavaScript enabled (via Crema) dismiss (close) icon on the right of any flash message.
<div class="flash">
<button class="flash-close js-flash-close" type="button"><%= octicon "x", :"aria-label" => "Close" %></button>
Dismissable flash message goes here.
</div>
A flash message with an action button.
<div class="flash">
<button type="submit" class="btn btn-sm primary flash-action">Complete action</button>
Flash message with action here.
</div>
A flash message that is full width and removes border and border radius.
<div class="flash flash-full">
<div class="container">
Full width flash message.
</div>
</div>
FAQs
Flash messages, or alerts, inform users of successful or pending actions.
The npm package primer-alerts receives a total of 798 weekly downloads. As such, primer-alerts popularity was classified as not popular.
We found that primer-alerts demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 14 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.