Buttons

Three emphasis levels: primary fills, outline draws a line, ghost does neither until you point at it. Every variant dips a pixel when pressed - on touch that press is the only feedback there is.

Plain Buttons

mw-btn-plain is for everywhere a <button> is the right element and a button is the wrong look - a calendar day, a time in a request row, a modal backdrop. It brings nothing but the focus ring and the pointer; everything else it inherits. Not the same as mw-btn-link, which is a button dressed as a link with a colour and a control height of its own, nor the same as mw-link, which is the link inside a sentence.

Text Links

mw-link is the link inside a sentence, mw-link-muted the quieter one. Same look as mw-btn-link, without the button: mw-btn carries a control height, and in running text that lifts the one line the link sits on above every line around it - glaring in a footer disclaimer, where the text is a size smaller to begin with. So mw-link in a paragraph, mw-btn mw-btn-link where the link really is one of several buttons and has to line up with them. Both work on an <a> and on a <button>.

Touch Targets

On a coarse pointer or below 768px the compact controls grow to a size a thumb can actually hit: mw-btn-sm, mw-input-sm and mw-select-sm to 2.5rem, a tab to 2.75rem, a calendar day to 44px. WCAG 2.5.8 puts the floor at 24px, and that is a floor, not a goal. mw-btn-mini keeps its 18px circle - it sits in tag rows and table cells where a bigger one would shift the layout - and grows its hit area to 28px instead, as does a kanban action button on its 32px box. Nothing to switch on; resize this page or open it on a phone.

Button Bars

A framed row of actions. Below 576px it stacks and every button takes the full width. The colour variants style whatever is inside them, so a bar of five buttons needs one class rather than five.

Progress Bars

A bar with an optional label and scale. The fill runs up from zero when it scrolls into view, so the number gets read rather than just seen.

Without a figure, and round

Loading Spinners

Three shapes for the same job. Each one needs its shape class: mw-spinner-primary on its own renders nothing at all.

Basic Spinners

Spinner Sizes

Spinner Colors

Spinner in Context

Inline

mw-spinner-inline takes the size and colour of the text it sits in - a busy button, a line still loading. The button keeps its label and says aria-busy="true".

Avatars

A picture or a pair of initials, in five sizes. The colour variants sit on the border, so they still read over a photo; on an initials avatar they fill the circle as well. Inside a group the overlap follows the avatar size. mw-avatar-landscape (3:2) and mw-avatar-portrait (9:16, 2:3 on -lg) are for a photo that is not square - meant for the two large sizes. Both run larger than the round step, and a landscape avatar shrinks to fit a narrow column.

Avatar Sizes

Avatar Shapes & Colors & Group

Avatar Shapes

Avatar Colors

Avatar Initials

For users without a picture. The color variants tint the surface here instead of the border.

MW

AB

CD

EF

GH

IJ

KL

MN

Avatar Group

Landscape

Portrait

Group With a Count

mw-avatar-more closes a group with the number of everyone who did not fit - give it role="img" and an aria-label that says so in words.

Tags

A label with a soft surface that names something - a topic, a state, a category - and sits in a row of its own kind. For a count or a status marker reach for a badge instead.

Filter chips

Badges

A badge is not a tag. A tag names something and sits in a row of its own kind; a badge carries a count or a status and usually sits on something - the number on a bell, the dot on an avatar. That is why it fills its colour instead of tinting it, and why it comes with an anchor.

Dropdown

Built on <details> and <summary> rather than a div and a click handler. That buys the whole keyboard contract for free: the trigger is focusable, Enter and Space toggle it, the open state lives in the DOM where a screen reader can see it, and the menu still opens with JavaScript switched off. The framework script only adds what markup cannot express - closing on Esc and on a click elsewhere.

Shortcuts

A kbd or mw-dropdown-shortcut at the end of an item sits right-aligned in the muted ink, and drops out on touch, where there is no keyboard to use it on.

Keyboard Keys

Anything that tells someone which key to press should look like the key. <kbd> is styled directly, so a shortcut in prose needs no class at all; mw-kbd is there for a span when the markup is not yours to change.

Ratings

Change the data-rating attribute (0-5) to see how many thumbs-up light up. You can also determine the icon flexibly.

Info Badges & Counters

A small solid marker for a status, a label or a count, down to a mini form that fits inside a table cell. A tag names something; this one flags it.

Pill Badges

Color Badges (with Border)

Block

Counters

Mini Info Badges (Sizes)

Mini Info Badges (Colors)

Alerts System

A message that belongs to the page it sits on. The colour carries the severity and the left rule repeats it, so the meaning survives where the tint does not. The same markup inside a mw-toast-stack becomes a toast.

With actions

mw-alert-actions inside the content puts Undo or Retry under the message. role="alert" is for what needs attention now, role="status" for a confirmation that can wait its turn.

Toast Stack

Alerts become toasts by putting them in a fixed, stacked container. Positions: mw-toast-stack-top-right (default), mw-toast-stack-top-center, mw-toast-stack-bottom-right, mw-toast-stack-bottom-center. Auto-dismiss stays the application's job. Give the stack role="status" and aria-live="polite", so a screen reader reads each new toast.

<div class="mw-toast-stack mw-toast-stack-top-right">
  <div class="mw-alert mw-alert-success">
    <div class="mw-alert-icon"><i class="fas fa-check-circle"></i></div>
    <div class="mw-alert-content">Entry saved.</div>
  </div>
</div>

Announcement

The ribbon glued under the fixed header - a discount, a launch note, a maintenance window. Shown here with mw-announcement-static, so the demos sit in the flow instead of over this page. Without it the ribbon fixes itself below the header, stays put while the page scrolls beneath it, and reserves the anchor scroll offset via --mw-announcement-height. The surface is 75% opaque with a backdrop blur - visible wherever content sits behind it, like the first demo below.

Code

Inline code gets a surface of its own so it reads as a quoted thing; blocks get a filename bar and a terminal variant. The syntax colours are a fixed pair of themes rather than brand tokens - code is easier to read in the colours an editor already uses.

// A simple greeting function
function greet(name) {
  return `Hello, ${name}!`;
}

// Display greeting in console
console.log(greet('Developer'));

// A simple React counter component
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    ......
  );
}

const greet = (name) => {
  // Simple greeting
  return `Hello, ${name}!`;
};

<p>Use the <code>mw-btn</code> class.</p>

<div class="mw-code-container">
  <pre><code>your_code_here();
    more_code();</code></pre>
</div>

<div class="mw-code-block"> <!-- Note: .mw-code-block wraps header + container -->
  <div class="mw-code-block-header">
    <span class="mw-code-block-filename">script.js</span>
    <span class="mw-code-block-language">JavaScript</span>
  </div>
  <div class="mw-code-container">
    <pre><code>your_code_here();</code></pre>
  </div>
</div>

<div class="mw-terminal">
  <span class="mw-terminal-line">npm install maverick-wave</span>
  <span class="mw-terminal-line mw-terminal-output">+ maverick-wave added</span>
</div>

Skeleton Loader

The shape of the content before the content arrives. Match it to what is actually loading - a skeleton in the wrong shape is worse than a spinner, because the page then moves twice.

Empty State

What a list shows when it holds nothing. An icon, a line saying what is missing and, ideally, the action that fills it. The parts are -icon, -title and -desc.

Inline

mw-empty-state-inline for a table body or a panel: the icon beside the text, the action under it, all on the left.

Pricing

Two pieces that are usually needed together: mw-price, the figure on its own, and mw-offer, the card it is sold from. The price is one baseline row - what it cost before, what it costs now, the unit, a discount tag - and everything in it is sized in em off --mw-price-size, so mw-price-sm and mw-price-lg move the whole row at once.

A struck-through price is a visual convention that a screen reader does not pass on - <s> is announced by almost none of them. Where an old and a new price stand next to each other, name them with mw-sr-only, as in the examples below. Without that the reader hears two prices and no idea which one is being charged.

Price

Offer cards

mw-offer goes on a mw-card and does one thing the card cannot: it pushes the price to the bottom of the body, so the prices in a row line up even though the feature lists have different lengths. Everything else - shell, body, footer, the mw-card-feature frame around the plan you want picked - is the card's.

Offer card with a head band

mw-offer-head puts name and price in a solid band at the top of the card - for when the price is the thing being compared and the feature list is only its justification. It takes its colour from the mw-card-addon-* class on the card, the same set the card badge and the ribbon read.

Price in the footer

No modifier for this one - a mw-price dropped into a mw-card-footer lines up with the button next to it on its own, and mw-price-sm keeps it from outweighing the action. The layout for a dated event, where the price is a detail rather than the offer.

Billing cycle

A subscription sold on three terms, where the longer one is cheaper. The switch is a mw-segmented above the grid, not one per card - three cards with three switches are three states the visitor has to keep in their head. Every card shows the same thing: what a month works out at on the chosen term, what the month costs without a discount, and what is actually charged.

Comparing per-month figures is the point. A yearly plan priced at "288 Euro" next to a monthly one at "30 Euro" is not a comparison a reader can make in their head, so the headline figure stays per month on all three terms and the amount that leaves the account moves to the line below it.

Marquee

A strip that keeps moving: partner logos, seals, the one line from a review everybody should read. The items sit in the track twice - the second group aria-hidden and inert, so a screen reader reads the list once and the keyboard never lands on the copy. The pointer or the focus on the strip holds it still - tabindex="0" makes it focusable when nothing inside it is.

With reduced motion the strip stands: the first group wraps centered and the copy is gone. --mw-marquee-duration sets the pace, mw-marquee-reverse the direction, and a logo shows its colours only under the pointer.

Seals and promises

Logos, the other way round

<div class="mw-marquee" role="region" aria-label="Partners" tabindex="0">
  <div class="mw-marquee-track">
    <ul class="mw-marquee-group">
      <li class="mw-marquee-item"><img src="partner.svg" alt="Partner" /></li>
      ...
    </ul>
    <!-- The same items again, for the seam -->
    <ul class="mw-marquee-group" aria-hidden="true" inert>
      <li class="mw-marquee-item"><img src="partner.svg" alt="" /></li>
      ...
    </ul>
  </div>
</div>