AlertBox

Give a message the right emphasis with a title, semantic tone, optional icon and contextual actions.

AlertBox

View source · API reference

An actionable notice

Make the next step part of the message. The actions slot keeps it alongside the context.

COMPONENT GUIDANCE A shared design language Tip

Use semantic tones to communicate intent across your interface.

Explore surfaces
Applies to both light and dark themes. 
<AlertBox
  tone="info"
  title="A shared design language"
  eyebrow="COMPONENT GUIDANCE"
  badge="Tip"
  icon="lucide:check"
  meta="Applies to both light and dark themes."
>
  <p>Use semantic tones to communicate intent across your interface.</p>
  <template #actions>
    <BtnLink href="/components/layout/panel/" tone="info" variant="outline">
      Explore surfaces
    </BtnLink>
  </template>
</AlertBox>

Choose the right urgency

Keep the message explicit so color is never the only signal.

All checks passed
The preview is ready for review.
Review required
Check the content before publishing.
Build failed
Correct the source error and build again. 
<Flex direction="column">
  <AlertBox tone="success" title="All checks passed">
    The preview is ready for review.
  </AlertBox>
  <AlertBox tone="warning" title="Review required">
    Check the content before publishing.
  </AlertBox>
  <AlertBox tone="danger" title="Build failed" variant="outline">
    Correct the source error and build again.
  </AlertBox>
</Flex>

Behavior and accessibility

AlertBox is a visual content component and does not automatically announce messages. For newly inserted urgent messages use an appropriate live region; for routine form feedback use FormStatus. Static notices should not interrupt screen-reader users.

API reference

AlertBox contract

Props below are the public template API. RefOrValue accepts a literal or a reactive ref; bind refs with a colon-prefixed attribute. Native attributes and events can be passed through the component root.

title

RefOrValue<string>
Default
not set

Visible heading. Choose a short title that identifies the content or task.

eyebrow

RefOrValue<string>
Default
not set

Short context above the heading, such as a category or release label.

badge

RefOrValue<string>
Default
not set

Optional compact label rendered with Badge.

meta

RefOrValue<string>
Default
not set

Secondary context such as an update time, limitation or reassurance.

tone

RefOrValue<SemanticTone>
Default
info

Semantic message tone. The default is info; use success, warning or danger only when that intent matches the text.

variant

RefOrValue<ComponentVariant>
Default
surface

Visual treatment. Accepts solid, surface, surfaceAlt, spotlight, glass, flat, flatAlt, flatSolid, outlineFill, outline, subtle, subtleBtn, link, sheen, underline, rail, bracket or none.

variantMode

RefOrValue<ComponentVariantMode>
Default
stateless

Use stateless for content surfaces; stateful enables the treatment’s hover, focus and active styles. It does not add interaction handlers.

icon

RefOrValue<string>
Default
not set

Registered SVG icon name. In browser apps, include the icon in the resolver passed to defineIconComponents.

Composition

Default slot: message body. actions: contextual links or buttons. Register defineAlertComponents with Panel, Flex, IconFrame, Icon and Badge dependencies; action components need their own registrations.