Inline message

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Usage

Explain a notice, error, or warning about the current task, with its cause and next step. Static messages aren't live regions. Announce only asynchronous changes, with role=status, or role=alert when urgent.

• Don't distinguish tones by color alone. State the status in Title and Description instead.
• Don't announce every message as an alert on page load. Leave static messages unannounced instead.
• Don't imply that retrying guarantees a real result. Say what the retry attempts instead.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

Root(tone) → Icon(tone) + Content(Title + Description + Actions)

Keyboard and accessibility

The message doesn't take focus. Tab reaches the action buttons, and Enter or Space activates them. The Icon is decorative. Title and Description convey the status. The caller sets Root.role.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { InlineMessage, Button } from '@surflane/ui'

<InlineMessage.Root tone='danger'>
  <InlineMessage.Icon tone='danger' />
  <InlineMessage.Content>
    <InlineMessage.Title>Discovery failed</InlineMessage.Title>
    <InlineMessage.Description>
      Check the connection and retry.
    </InlineMessage.Description>
    <InlineMessage.Actions>
      <Button onClick={retry}>Retry</Button>
    </InlineMessage.Actions>
  </InlineMessage.Content>
</InlineMessage.Root>

Key API

The table lists the common wrapper's main props. See the package type declarations for the full types.

Related tokens