Skip to main content

​
Inline Notification

A contextual notification that appears inline with content.

​
Anatomy

<InlineNotification.Root tone="info" variant="default">
  <InlineNotification.Icon />
  <InlineNotification.Content>
    <InlineNotification.TextWrapper>
      <InlineNotification.Title>Title</InlineNotification.Title>
      <InlineNotification.Description>Description</InlineNotification.Description>
    </InlineNotification.TextWrapper>
    <InlineNotification.Actions>
      <InlineNotification.Action>Action</InlineNotification.Action>
    </InlineNotification.Actions>
  </InlineNotification.Content>
  <InlineNotification.Close />
</InlineNotification.Root>

​
Components

​
InlineNotification.Root

The root container for the inline notification.
​
tone
string
default:"neutral"
Visual tone that determines the icon and colors. Options: neutral, info, success, warning, danger
​
variant
string
default:"default"
Visual variant. Options: default, filled
​
icon
ReactNode
Custom icon element. If not provided, displays a tone-appropriate icon.
​
className
string
Additional CSS classes

​
InlineNotification.Icon

Icon that indicates the tone of the notification.
​
tone
string
default:"neutral"
Visual tone. Options: neutral, info, success, warning, danger
​
className
string
Additional CSS classes

​
InlineNotification.Content

Container that groups text and actions.
​
className
string
Additional CSS classes

​
InlineNotification.TextWrapper

Groups title and description.
​
className
string
Additional CSS classes

​
InlineNotification.Title

The title text of the notification.
​
className
string
Additional CSS classes

​
InlineNotification.Description

The description text of the notification.
​
className
string
Additional CSS classes

​
InlineNotification.Actions

Container for action buttons.
​
className
string
Additional CSS classes

​
InlineNotification.Action

Action button. Uses tertiary variant for notifications with descriptions, link-neutral for compact notifications.
​
className
string
Additional CSS classes

​
InlineNotification.Close

Button to dismiss the notification.
​
onClose
() => void
Callback when close button is clicked
​
className
string
Additional CSS classes

​
Variants

​
default

Neutral background with tone-colored icon and text.

​
filled

Tone-colored background for higher emphasis.

​
Tones

​
neutral

Neutral informational tone.

​
info

Informational feedback (blue).

​
success

Success feedback (green).

​
warning

Warning feedback (yellow/orange).

​
danger

Error or critical feedback (red).

​
Layout Modes

The component automatically adapts between two layout modes based on whether a description is present:

​
Compact (no description)

  • Horizontal layout with centered items
  • Smaller height (36px minimum)
  • Link-style actions
  • Separator before actions

​
Card (with description)

  • Vertical/stacked layout
  • Larger padding
  • Tertiary button-style actions
  • No separator

Build docs developers (and LLMs) love

Get started for freeTalk to us