Message

Inline section message (callout) with a colored edge bar: contextual info, warnings, errors, successes, or discovery announcements embedded in page flow. For full-width page-level announcements use the .banner subcomponent; for floating toast notifications use .flag.

Root: .message on <div>, <section>

Example

Example
Trial ending

Your trial expires in 3 days.

Upgrade
<div class="message message-warning"><div class="message-title">Trial ending</div><p>Your trial expires in 3 days.</p><div class="message-actions"><a href="#">Upgrade</a></div></div>
Authoring tags — <lz-message> and <lz-flag>
Trial ending

Your trial expires in 3 days.

Issue created
LOZ-42 has been added to the backlog.
View issue

Authoring source

<lz-message variant="warning" title="Trial ending">
  <p>Your trial expires in 3 days.</p>
</lz-message>
<lz-flag title="Issue created" icon="story" actions="true">
  LOZ-42 has been added to the backlog.
  <a slot="actions" href="#">View issue</a>
</lz-flag>

Expands to

<div class="message message-warning" data-lz="message" data-lz-version="0.1.0">
  <div class="message-title">Trial ending</div>
  
  <p>Your trial expires in 3 days.</p>

</div>
<div class="flag" actions="true" data-lz="flag" data-lz-version="0.1.0">
  <div class="flag-icon"><span class="issue-type issue-type-story" role="img" aria-label="story"></span></div>
  <div class="flag-content">
    <div class="flag-title">Issue created</div>
    <div class="flag-description">
  LOZ-42 has been added to the backlog.
  
</div>
    <div class="flag-actions"><a href="#">View issue</a></div>
  </div>
  <button class="flag-dismiss" aria-label="Dismiss">×</button>
</div>

Authoring tags are macro-expanded to the canonical HTML above at build time (Vite plugin or lz-expand CLI) — the shipped artifact has no runtime.

Contract

Variants & modifiers

ClassAxisRules
message-infotoneoptional · exclusive
message-warningtoneoptional · exclusive
message-errortoneoptional · exclusive
message-successtoneoptional · exclusive
message-discoverytoneoptional · exclusive

Structure

SelectorRequiredDescription
.message-titleoptionalBold heading line, first child.
.message-actionsoptionalRow of action links after the body text.

Accessibility

Tone is conveyed by color only — make the text itself state the severity (the title usually does). Messages inserted dynamically should get role="status" (or role="alert" for errors) so they are announced.

Nesting

Allowed in:

  • page content
  • .modal-body
  • .card-body

Never inside (or containing):

  • .message

Subcomponents

Flag

Floating toast notification (bottom-left in Jira): icon, content block (title/description/actions), and a dismiss button. Add .flag-fixed to pin it to the viewport; bold tone variants recolor the whole flag for success/error toasts. It is a glass surface.

Root: .flag on <div>

Examples

Example 1
Changes saved
<div class="flag flag-success" role="status"><div class="flag-content"><div class="flag-title">Changes saved</div></div><button class="flag-dismiss" aria-label="Dismiss">×</button></div>
Example 2
Issue created
LOZ-42 added to the backlog.
View issue
<div class="flag" role="status"><div class="flag-icon"><span class="issue-type issue-type-story" aria-label="Story"></span></div><div class="flag-content"><div class="flag-title">Issue created</div><div class="flag-description">LOZ-42 added to the backlog.</div><div class="flag-actions"><a href="#">View issue</a></div></div><button class="flag-dismiss" aria-label="Dismiss">×</button></div>

Variants & modifiers

ClassAxisRules
flag-infotoneoptional · exclusive
flag-warningtoneoptional · exclusive
flag-errortoneoptional · exclusive
flag-successtoneoptional · exclusive
flag-discoverytoneoptional · exclusive
flag-fixedmodifieroptional

Structure

SelectorRequiredDescription
.flag-contentrequiredThe flexible middle block (flex:1, min-width:0) holding .flag-title, optional .flag-description, and optional .flag-actions.
.flag-content > .flag-titleoptionalHeading line of the toast.
.flag-iconoptionalOptional leading icon block (e.g. an .issue-type square), flex-shrink:0.
button.flag-dismissoptionalOptional trailing × close button.

Accessibility

OnAttributeLevelWhen
.flag-dismissaria-labelrequired

Toasts appear asynchronously: give the flag (or its container) role="status", or role="alert" for error flags, so screen readers announce it. .flag-dismiss must carry aria-label (its content is just ×). The flag is a glass surface — never nest another glass surface (dropdown-menu, modal, navbar, another flag) inside it, and never mount a flag inside one; glass-on-glass compounds blur and voids the contrast guarantees.

Nesting

Allowed in:

  • directly under <body> (with .flag-fixed), or a toast stack container

Never inside (or containing):

  • .flag
  • .dropdown-menu
  • dialog.modal
  • .navbar