Lenso UI

Foundation component · Feedback

Inline Alert

An inline notice with semantic tone, replaceable icon, supporting copy, and actions.

Live playground

Settings changed elsewhere

Reload to use the latest values before editing.

Usage guidance

  • Use neutral or info for guidance, warning for risk, and error for a failed operation.
  • Keep recovery actions and domain-specific copy in your application.

  • Title is neutral by default; render the heading level required by the surrounding page.

  • Tone changes the icon only; the container remains a neutral supporting surface.

Announcements

  • Tone never implies role=alert.

  • Use role=status for non-urgent updates and role=alert only for urgent failures that need immediate attention.

Implementation

Your application opts into live-region semantics only when the update is dynamic.

import { InlineAlert } from "@lenso/ui/inline-alert";

<InlineAlert.Root tone="warning">
  <InlineAlert.Icon />
  <InlineAlert.Content>
    <InlineAlert.Title as="h2">Configuration changed</InlineAlert.Title>
    <InlineAlert.Description>Review the new values before continuing.</InlineAlert.Description>
  </InlineAlert.Content>
  <InlineAlert.Actions>{reviewButton}</InlineAlert.Actions>
</InlineAlert.Root>;
Lenso UI