Mark · Components

Button vs Bootstrap

Mark stands on Bootstrap and curates it. The button is where that shows most plainly, so this page puts them side by side — same page, same stylesheet, both real.


The ladder

Four variants, ordered by emphasis rather than by colour. The base is a finished button; every modifier above it adds weight, and none of them exist to rescue it.

mk-btn mk-btn--naked Cancel Stripped to the label. The least a button can be and still be one.
mk-btn Examples The base, and already finished — drawn in ink, so it is right on any ground.
mk-btn mk-btn--primary Get started The accent fill. The main action on an ordinary page.
mk-btn mk-btn--inverse Book now Ink and ground trade places — the only fill that survives ON the accent.

The engine's

Bootstrap ships 26 button classes — eight solid variants, seven outlines, sizes, and the rest — because treatment and colour are fused into one name, so every new intent costs two classes. Mark keeps them on separate axes, which is why four is enough.

btn Bare btn Renders nearly invisible. It is an abstract that requires a second class to become a button.
btn btn-primary Bootstrap primary The fill, and the only variant most pages ever use.
btn btn-outline-primary Bootstrap outline The outline, as a named variant rather than the base.
btn btn-off-white Bootstrap fixed-tone How a button survives a dark band: by being told, at every call site. Bootstrap spells this key light.

Context

The base is drawn in ink, and ink already flips with its surroundings — so the same two classes are correct on a white page and on an accent band, with nothing said at the call site. This is the whole reason a fixed-tone button has no counterpart here: 28 button calls in this theme used to name one at the call site, and all of them stopped needing to. Not one is left — they read inverse or outline now, and the old name survives only as an alias, for content authored in the CMS before the rename.

Groups

mk-btn-group is a block, not a modifier of the button — it means "these belong together," and it renders that the way pages actually need it. Bootstrap's default is the fused segmented control, which is a visual treatment wearing a semantic name; here you ask for it.

mk-btn-group — the base: they belong together.

mk-btn-group--join — the joined look, asked for.

btn-group — Bootstrap's, where fused IS the default.

The group's own argument