https://stopsopa.github.io/alert-webcomponent/
A lightweight, reusable alert/callout web component with GitHub-style alerts. Built with vanilla JavaScript and the Web Components API.
- ✅ Pure Web Components API - no dependencies
- ✅ Shadow DOM for style encapsulation
- ✅ GitHub-style alert designs with Octicons
- ✅ Supports any HTML content via slots
- ✅ Reactive attribute updates
- ✅ Five alert types: note, tip, important, warning, caution
- ✅ Lightweight (~3KB uncompressed)
Download alert-box.js and include it in your HTML:
wget https://raw.githubusercontent.com/stopsopa/alert-webcomponent/refs/heads/main/alert-box.js
and then there two standard options to load:
<script src="path/to/alert-box.js"></script>import './alert-box.js';<!DOCTYPE html>
<html>
<head>
<script src="alert-box.js"></script>
</head>
<body>
<alert-box type="note">
This is a note callout with important information.
</alert-box>
<alert-box type="warning">
<strong>Warning:</strong> This action cannot be undone.
</alert-box>
</body>
</html><!-- Note (blue) - Informational content -->
<!-- not specifying type will make it "note" by default -->
<alert-box type="note">
Highlights information that users should take into account, even when skimming.
</alert-box>
<!-- Tip (green) - Helpful suggestions -->
<alert-box type="tip">
Optional information to help a user be more successful.
</alert-box>
<!-- Important (purple) - Crucial information -->
<alert-box type="important">
Crucial information necessary for users to succeed.
</alert-box>
<!-- Warning (yellow) - Critical content -->
<alert-box type="warning">
Critical content demanding immediate user attention due to potential risks.
</alert-box>
<!-- Caution (red) - Negative consequences -->
<alert-box type="caution">
Negative potential consequences of an action.
</alert-box>
<!-- Custom Label Overrides -->
<alert-box type="warning" alert="Security Advisory">
A custom label that precisely describes the nature of the alert.
</alert-box>
<alert-box type="note" alert="Documentation">
Override the default label to suit your specific context.
</alert-box>The component accepts any HTML content via the default slot:
<alert-box type="warning">
<strong>⚠️ Warning:</strong> Using both methods will cause issues:
<ul>
<li>Method A is preferred</li>
<li>Method B has limitations</li>
<li>Don't combine both approaches</li>
</ul>
<p>See the <a href="/docs">documentation</a> for details.</p>
</alert-box>| Attribute | Type | Default | Description |
|---|---|---|---|
type |
string | note |
Alert type: "note", "tip", "important", "warning", or "caution" |
alert |
string | (type's default label) | Custom override for the default alert label |
| Slot | Description |
|---|---|
| (default) | Content to display in the alert box (accepts HTML) |
| Type | Color | Use Case |
|---|---|---|
note |
Blue | Neutral, informational content |
tip |
Green | Helpful, optional information |
important |
Purple | Crucial information |
warning |
Yellow | Critical content with potential risks |
caution |
Red | Negative consequences |
const alert = document.querySelector('alert-box');
alert.setAttribute('type', 'warning'); // Automatically re-rendersconst alert = document.createElement('alert-box');
alert.setAttribute('type', 'important');
alert.textContent = 'This is dynamically created!';
document.body.appendChild(alert);The component uses Shadow DOM for style encapsulation. The default styles match GitHub's alert design.
You can control the spacing around alerts using standard CSS on the host element:
alert-box {
margin: 20px 0;
}The component's colors are hard-coded to match GitHub's design. If you need custom colors, you can modify the getConfig() method in alert-box.js.
- Chrome/Edge: 53+
- Firefox: 63+
- Safari: 10.1+
- Opera: 40+
The component uses:
- Custom Elements v1
- Shadow DOM v1
- ES6 Classes
Check out index.html for a complete demo with all alert types and examples.
- Custom Element: Extends
HTMLElementusing the Custom Elements API - Shadow DOM: Encapsulates styles and markup
- Observed Attributes: Reacts to
typeattribute changes - Slots: Default slot for flexible content projection
- Constructor: Attaches shadow root
- connectedCallback: Renders initial content when inserted into DOM
- attributeChangedCallback: Re-renders when
typeattribute changes
#shadow-root
└── style (component styles)
└── .alert-box (container)
├── svg.icon (GitHub Octicon)
├── .label (Alert type label)
└── .content (slot for user content)
MIT License - Feel free to use in your projects!