callout

Example

Soft surfaces and borders carry the status; titles and optional icons add emphasis. Messages remain in the page flow, near the content they explain.

Open the complete example to try dark mode, narrow width, optional icons, actions, and dismissal.

Usage

<m-callout variant="warning">
  <div data-callout-body>
    <h3 data-callout-title>Your trial ends in 3 days</h3>
    <p>Choose a plan to keep your projects available.</p>
    <div data-callout-actions>
      <a href="/billing">View plans</a>
    </div>
  </div>
</m-callout>

m-callout is an unregistered, CSS-only element. No module or build step is needed. Use one direct data-callout-body child. The title and actions are optional; a single paragraph is enough for a short message. Choose the heading level appropriate to the surrounding document, or use a paragraph with data-callout-title if no heading is appropriate.

Use the neutral default for guidance, success for confirmation, warning for something to consider, and danger for a problem. State the meaning in the text so color is never the only signal. Field-specific validation belongs with its field; a callout can summarize a broader problem.

Optional icons and dismissal

<m-callout id="confirmation" variant="success">
  <svg data-callout-icon viewBox="0 0 24 24" aria-hidden="true"
       fill="none" stroke="currentColor" stroke-width="1.5">
    <path d="m5 12 4 4L19 6" />
  </svg>
  <div data-callout-body>
    <p>Your domain is verified and ready to use.</p>
  </div>
  <button type="button" data-callout-dismiss data-variant="ghost"
          aria-label="Dismiss domain confirmation">×</button>
</m-callout>

The app supplies its own icon artwork. Mica only sizes and colors the direct data-callout-icon child. Decorative icons should be hidden from assistive technology; the message conveys the status.

The optional dismiss button is a compact trailing control. It has no built-in behavior. Your app handles its click, sets hidden on the callout, and moves focus to an appropriate surviving control if focus was inside it. Omit the button unless you implement dismissal. Keep essential instructions and unresolved errors visible while they remain relevant.

Actions are ordinary links or buttons with application-owned behavior. They wrap within data-callout-actions. Neither actions nor dismissal require a Mica enhancement.

Announcements are an application decision

Static guidance is ordinary content. Variants never add role="alert", a live region, or focus behavior automatically.

For a newly appearing, nonurgent confirmation, update an existing role="status" region. For an urgent dynamically updated error, use role="alert" where an interruption is justified. Do not announce every callout on page load, move focus merely to announce a message, or announce the same update in multiple live regions. Keep action buttons outside a dedicated live-message region when practical.

The working example uses a separate status region for its Save and Try again actions. That small script belongs to the example application; the callouts themselves work without JavaScript.

API

The shared --radius-md applies; the default theme stays square. For a neutral panel with colored emphasis, override these properties in unlayered application CSS:

m-callout {
  --callout-background: var(--color-surface);
  --callout-border: var(--color-border);
}