5 Pure CSS1 with JSPublished 2026-10-03Free · no sign-up
The small pieces every interface needs: status badges, an accessible tooltip, alert banners, removable filter chips, dividers with text and keyboard key styles. They are short enough to read in a minute and careful about the details that usually get skipped, such as screen-reader announcements and colour-blind safe states.
Small pill badges for order and account states: paid, pending, failed, draft and new. Each pairs a colour with a dot and a word, so the state is clear for people who cannot tell the colours apart. The tinted backgrounds keep contrast high on dark interfaces.
A tooltip that appears on hover and on keyboard focus, positioned above its trigger with a small arrow. The tip text is connected with aria-describedby so screen readers read it with the button, and it uses a short fade that is removed for visitors who prefer reduced motion.
View code
<span class="tts-tip">
<button type="button" aria-describedby="tts-tip-1">Copy link</button>
<span role="tooltip" id="tts-tip-1">Copies the share link to your clipboard</span>
</span>
Four message styles for success, information, warning and error, each with an icon drawn in CSS, a bold title and a short message. Errors use role=alert so they are announced immediately; the others use role=status, which waits politely. The left border and icon carry the meaning as well as the colour.
View code
<div class="tts-alerts">
<div class="tts-alert is-ok" role="status"><b>Order placed</b> We emailed your receipt.</div>
<div class="tts-alert is-info" role="status"><b>Heads up</b> Prices update on Monday.</div>
<div class="tts-alert is-warn" role="status"><b>Low stock</b> Only 3 left in your size.</div>
<div class="tts-alert is-err" role="alert"><b>Payment failed</b> Check your card details and try again.</div>
</div>
Filter chips like the ones above a product list: each shows an active filter with a remove button, and a Clear all link removes the rest. Every remove button has a label naming the filter, focus moves sensibly after a chip is removed, and an empty state appears when nothing is left.
var box = document.querySelector('.tts-chips');
function refresh() {
var left = box.querySelectorAll('.tts-chip').length;
box.querySelector('.tts-none').hidden = left > 0;
box.querySelector('.tts-clear').hidden = left === 0;
}
box.addEventListener('click', function (e) {
var btn = e.target.closest('.tts-chip button');
if (btn) {
var chip = btn.parentNode, next = chip.nextElementSibling;
chip.remove();
refresh();
var target = next && next.querySelector ? (next.querySelector('button') || next) : null;
if (target && target.focus && !target.hidden) target.focus();
}
if (e.target.classList.contains('tts-clear')) {
box.querySelectorAll('.tts-chip').forEach(function (c) { c.remove(); });
refresh();
}
});
05. Dividers with Text
Pure CSS
Horizontal rules that carry a label in the middle, as in "or continue with" on sign-in forms, plus a plain gradient divider and a dotted one. The lines are flex pseudo-elements that grow to fill the space, so the label stays centred at any width with no fixed sizes.
Styles for the kbd element, used to show keyboard shortcuts in documentation and settings. Keys get a raised look from a bottom border, combinations are spaced with a plus sign, and the font size follows the surrounding text in em units, so the same class works in a heading and in small print.
View code
<p class="tts-kbd">Search the docs with <kbd>Ctrl</kbd> + <kbd>K</kbd>, save with <kbd>Ctrl</kbd> + <kbd>S</kbd>, and close dialogs with <kbd>Esc</kbd>.</p>
Badges, alerts and chips appear on almost every screen of an app or store. Getting them right once, with good contrast, clear states and proper roles, improves the whole interface. Getting them wrong means repeating the same accessibility bug in dozens of places.
Never rely on colour alone
About one in twelve men has some form of colour-blindness. The badges pair each colour with a dot and a word, and the alerts add a thick border and an icon, so the meaning survives without colour. That is a WCAG requirement, not just a nice-to-have.
Announcing changes
Messages that appear after an action need to be announced to screen-reader users. role="alert" interrupts immediately and suits errors; role="status" waits politely and suits confirmations. Tooltips connect to their trigger with aria-describedby.
Use em for scalable snippets
The keyboard key style uses em units for padding, radius and font size, so the same class looks right inside a large heading and in small print. Sizing small components relative to their text keeps them in proportion wherever they are used.
Frequently asked questions
Do the tooltips work on touch screens?
They appear on focus, so tapping the button shows the tip on most touch devices. Keep essential information out of tooltips, because some people will never see them.
Can I use these in React or Vue?
Yes. Copy the CSS into your stylesheet and the markup into your component; the chips demo has a few lines of plain JavaScript you can replace with your framework's state.