Component API

Component classes use mr-* and describe presentation only. Optional JavaScript behavior uses data-mr-*. Native HTML and ARIA carry state whenever possible.

Cards

<article class="mr-card mr-card--positive">
  <header>Status</header>
  <p>Everything is ready.</p>
</article>

Button variants

<button class="mr-button--outlined">Outline</button>
<button class="mr-button--positive">Save</button>

Layer presentation primitives

Modal, drawer, and popover Layers may share the same optional content scaffold. The classes below are presentation only; data-mr-layer and native HTML still define behavior.

<header class="mr-layer__header">
  <div class="mr-layer__heading">
    <h2 class="mr-layer__title">Title</h2>
    <p class="mr-layer__description">Supporting text.</p>
  </div>
  <button>Close</button>
</header>
<div class="mr-layer__body">...</div>
<footer class="mr-layer__actions">...</footer>

Tooltip source templates may use mr-tooltip__title andmr-tooltip__content. See modal/drawer Layersand popovers/tooltips for live examples.

Stateful behavior hooks

Behavior configuration belongs in data-mr-* attributes rather than presentation classes. For example, a clickable list can remember native<details> disclosure state with an application-chosen persistence key:

<ul class="mr-clickable-list"
    data-mr-clickable-list-persist="project-navigation">
  <li>
    <details id="project-guides" open>
      <summary>Guides</summary>
      <ul>...</ul>
    </details>
  </li>
</ul>

The behavior stores only open disclosure IDs; the authored open state remains the lower-capability baseline. See theClickable Item List page for the complete contract.

Authored API versus generated internals

Only classes and data-mr-* hooks documented on the public component pages are authoring API. Some stylesheets contain runtime-generated child classes such as search result parts, copy/reset buttons, or Tooltip SVG progress-ring parts. Those classes exist so Markup Refine can style DOM it creates itself; applications should not author or query them unless a component page explicitly documents that class. Prefer semantic/native state and public behavior hooks over implementation selectors.

Behavior is separate

<pre data-mr-copyable><code>npm install example</code></pre>

<button class="mr-search-trigger" data-mr-search
        data-mr-search-static-url="/search-index.json">
  Search
</button>

See the individual component pages for concrete markup andprogressive enhancement for behavior/state semantics.

MarkupRefineLib