Alert

View Source

A component that provides contextual feedback for actions. This component supports a wide range of context configurations that combine text, icons, buttons, and links.

Install

npm install seed-alert --save

Dependencies

Example

Alerts support a wide variety of child selector types (h1-h6, p, ul, etc…) with any length of text.

<div class="c-alert" role="alert">
  <h3>You, Are, A, Toyyy!</h3>
  <p>You're not the real thing. You're an action figure. You are a child's play thing!</p>
</div>

Inner text color

To ensure the inner text color matches the alert color scheme, you can add the class .c-alert__text. This is useful to help override base text colors for headings (h1-h6) or lists (ul).

<div class="c-alert" role="alert">
  <h3>You, Are, A, Toyyy!</h3>
  <p class="c-alert__text">
    You're not the real thing. You're an action figure. You are a child's play thing!
  </p>
</div>
<div class="c-alert" role="alert">
  <p class="c-alert__text">...</p>
</div>

Links will automatically adapt the alert’s base text color. Links will also be underlined by default to help better distinguish them from plain ol’ text.

<div class="c-alert" role="alert">
  <h3>We stick together</h3>
  We stick together and can see it through. Cause <a href="https://www.youtube.com/watch?v=nMN4JZ8crVY" target="_blank">you've got a friend in me</a>.
</div>
<div class="c-alert" role="alert">
  <a href="#">Link</a>
</div>

States

Alerts comes with a handful of color schemes to represent states.

<div class="c-alert is-error" role="alert">
  <h3>You, Are, A, Toyyy!</h3>
  <p>You're not the real thing. You're an action figure. You are a child's play thing!</p>
</div>
<div class="c-alert is-info" role="alert">
  <h3>Buzz?</h3>
  <p>Buzz Lightyear, you're not worried are you?</p>
</div>
<div class="c-alert is-success" role="alert">
  <h3>Success!</h3>
  <p>That's not flying, that's just falling with style ;)</p>
</div>
<div class="c-alert is-warning" role="alert">
  <h3>Just a heads up</h3>
  <p>You my friend are responsible for delaying my rendezvous with star command!</p>
</div>
<div class="c-alert is-error" role="alert">...</div>
<div class="c-alert is-info" role="alert">...</div>
<div class="c-alert is-success" role="alert">...</div>
<div class="c-alert is-warning" role="alert">...</div>

Configurations

Below are the default Sass configuration variables for seed-alert. The variables can be found in the pack’s _config.scss file.

seed-alert/_config.scss
// Dependencies
@import "pack/seed-button/_config";

// Namespace
$seed-alert-namespace: "c-alert" !default;
$seed-alert-error-namespace: "error" !default;
$seed-alert-info-namespace: "info" !default;
$seed-alert-success-namespace: "success" !default;
$seed-alert-warning-namespace: "warning" !default;
$seed-alert-text-namespace: "#{$seed-alert-namespace}__text" !default;

// Configs
$seed-alert-accent-width: 4px !default;
$seed-alert-padding: 12px 16px 12px 20px !default;
$seed-alert-margin-bottom: 16px !default;


// Config for state prefix
// options: true || false
// if true, then alert states will compile with the defined state prefix
// Default is ".is-"
// Example:
// .is-success {
//   ...
// }
$seed-alert-enable-state-prefix: true !default;
$seed-alert-state-prefix: "is" !default;

$seed-alert-allow-link-normalize: true !default;
$seed-alert-link-normalize-selector: "a:not(.#{$seed-button-namespace})" !default;
↑Back to top
© Help Scout 2024