Getting Started
InstallationVersioning
Integrations
ESLintTailwind CSS
Theming & Patterns
Composition
Polymorphic ComponentsRender Props
Components
OverviewAccordionAlert Banner
AvatarBreadcrumbsButtonButton GroupCard
Beta
CheckboxCheckbox Group
CollapsibleComboboxDialogDividerDrawerFile Input
Beta
Header BarIconIcon ButtonInline Icon ButtonInline Notification
LinkMenuNumber InputPaginationPassword InputPopoverProgressProgress RingRadioSegmented ControlSelectSide NavSliderStepper
Beta
SwitchSwitch Group
TableTabsTagText Area
Text InputToast NotificationTooltipTree

Inline Notification

1.12.0

Inline notifications provide contextual feedback without disrupting the user's workflow. They support multiple semantic types ranging from informational updates to critical warnings.

import {InlineNotification} from "@qualcomm-ui/react/inline-notification"

Examples

Simple

Basic inline notification using the simple API with heading and description.

Label
Description
<InlineNotification
  className="w-96"
  description="Description"
  dismissable
  label="Label"
/>

Composite

Use the composite API with individual components for more granular control.

Label
Description
<InlineNotification.Root className="w-96">
  <InlineNotification.Icon />
  <InlineNotification.Label>Label</InlineNotification.Label>
  <InlineNotification.Description>
    Description
  </InlineNotification.Description>
</InlineNotification.Root>

Emphasis (color)

Control the visual emphasis with different colors: info, success, warning, danger, and neutral. Customize these with the emphasis prop.

info
success
warning
danger
neutral
<InlineNotification emphasis="info" label="info" />
<InlineNotification emphasis="success" label="success" />
<InlineNotification emphasis="warning" label="warning" />
<InlineNotification emphasis="danger" label="danger" />
<InlineNotification emphasis="neutral" label="neutral" />

Dismissable

Add dismiss functionality to the simple notification using the dismissable prop. Use the <InlineNotification.CloseButton /> component when using the composite API.

Simple
Composite
<InlineNotification dismissable label="Simple" />

<InlineNotification.Root>
  <InlineNotification.Icon />
  <InlineNotification.Label>Composite</InlineNotification.Label>
  <InlineNotification.CloseButton />
</InlineNotification.Root>

Action

Include action links in notifications using the action property or the <InlineNotification.Action> component via the composite API.

Simple
Description for action demo
Text link
Composite
Description for action demo
Text link
import type {ReactElement} from "react"

import {InlineNotification} from "@qualcomm-ui/react/inline-notification"
import {Link} from "@qualcomm-ui/react/link"

export function InlineNotificationActionDemo(): ReactElement {
  return (
    <div className="flex flex-col gap-4">
      <InlineNotification
        action={<Link>Text link</Link>}
        description="Description for action demo"
        label="Simple"
      />

      <InlineNotification.Root>
        <InlineNotification.Icon />
        <InlineNotification.Label>Composite</InlineNotification.Label>
        <InlineNotification.Description>
          Description for action demo
        </InlineNotification.Description>
        <InlineNotification.ActionContainer>
          <Link>Text link</Link>
        </InlineNotification.ActionContainer>
      </InlineNotification.Root>
    </div>
  )
}

Layout

Choose between inline and stacked layouts using the orientation property. Stacked layout places the description and action below the content.

Horizontal
Description for horizontal orientation
Text link
Vertical
Description for vertical orientation
Text link
<InlineNotification
  action={<Link size="sm">Text link</Link>}
  description="Description for horizontal orientation"
  dismissable
  label="Horizontal"
/>

<InlineNotification
  action={<Link size="sm">Text link</Link>}
  description="Description for vertical orientation"
  dismissable
  label="Vertical"
  orientation="vertical"
/>

Explorer

Label
Description
Text link

Component Anatomy

Hover to highlight, click to view API

rootstatus-iconheadingdescriptionactionclose-trigger

API

<InlineNotificaton>

The InlineNotification component supports every property from the InlineNotification.Root component, plus the props listed below.

PropTypeDefault
action
The component used for the content of the action element.
ReactNode
actionProps
Props applied to the action container element.
InlineNotificationActionContainerProps
closeButtonProps
Props applied to the close button element.
InlineNotificationCloseButtonProps
description
Optional description text for the notification.
ReactNode
descriptionProps
Props applied to the description element.
InlineNotificationDescriptionProps
dismissable
When true, renders a close button that dismisses the notification on click.
boolean
false
icon
Override the icon displayed in the notification. When this prop is omitted, the icon is determined by the emphasis prop.
| LucideIcon
| ReactNode
iconProps
Props applied to the icon element.
InlineNotificationIconProps
label
Optional heading text for the notification.
ReactNode
labelProps
Props applied to the label element.
InlineNotificationLabelProps
action
Type
ReactNode
Description
The component used for the content of the action element.
actionProps
Type
InlineNotificationActionContainerProps
Description
Props applied to the action container element.
closeButtonProps
Type
InlineNotificationCloseButtonProps
Description
Props applied to the close button element.
description
Type
ReactNode
Description
Optional description text for the notification.
descriptionProps
Type
InlineNotificationDescriptionProps
Description
Props applied to the description element.
dismissable
Type
boolean
Description
When true, renders a close button that dismisses the notification on click.
icon
Type
| LucideIcon
| ReactNode
Description
Override the icon displayed in the notification. When this prop is omitted, the icon is determined by the emphasis prop.
iconProps
Type
InlineNotificationIconProps
Description
Props applied to the icon element.
label
Type
ReactNode
Description
Optional heading text for the notification.
labelProps
Type
InlineNotificationLabelProps
Description
Props applied to the label element.

Composite API

<InlineNotification.Root>

Groups all parts of the notification. Renders a <div> element by default.
PropTypeDefault
children
React children prop.
ReactNode
dir
The document's text/writing direction.
'ltr' | 'rtl'
'ltr'
emphasis
Governs the color of the notification and its icon.
| 'info'
| 'success'
| 'warning'
| 'danger'
| 'neutral'
| 'loading'
'info'
getRootNode
A root node to correctly resolve document in custom environments. i.e., Iframes, Electron.
    () =>
    | Node
    | ShadowRoot
    | Document
    id
    id attribute. If omitted, a unique identifier will be automatically generated for accessibility.
    string
    onDismiss
    Function invoked when the notification is dismissed
      () => void
      orientation
      The layout of the notification's elements.
      • 'horizontal': The icon, title, description, link, and close button are displayed inline.
      • 'vertical': The icon, title, and close button are placed on the first line, while the description, and link are stacked vertically and aligned with the title.
      | 'horizontal'
      | 'vertical'
      'horizontal'
      render
      Allows you to replace the component's HTML element with a different tag or component. Learn more
      | ReactElement
      | ((
          props: object,
        ) => ReactElement)
      role
      The WAI-ARIA role of the notification.
      • 'alert': Use this role when the notification is an alert that requires the user's immediate attention, like for errors or urgent information.
      • 'status': Use this role when the notification is a status message that doesn't require the user's immediate attention, like for success or informational messages.
      | 'status'
      | 'alert'
      'status'
      children
      Type
      ReactNode
      Description
      React children prop.
      dir
      Type
      'ltr' | 'rtl'
      Description
      The document's text/writing direction.
      emphasis
      Type
      | 'info'
      | 'success'
      | 'warning'
      | 'danger'
      | 'neutral'
      | 'loading'
      Description
      Governs the color of the notification and its icon.
      getRootNode
      Type
      () =>
      | Node
      | ShadowRoot
      | Document
      Description
      A root node to correctly resolve document in custom environments. i.e., Iframes, Electron.
        id
        Type
        string
        Description
        id attribute. If omitted, a unique identifier will be automatically generated for accessibility.
        onDismiss
        Type
        () => void
        Description
        Function invoked when the notification is dismissed
          orientation
          Type
          | 'horizontal'
          | 'vertical'
          Description
          The layout of the notification's elements.
          • 'horizontal': The icon, title, description, link, and close button are displayed inline.
          • 'vertical': The icon, title, and close button are placed on the first line, while the description, and link are stacked vertically and aligned with the title.
          render
          Type
          | ReactElement
          | ((
              props: object,
            ) => ReactElement)
          Description
          Allows you to replace the component's HTML element with a different tag or component. Learn more
          role
          Type
          | 'status'
          | 'alert'
          Description
          The WAI-ARIA role of the notification.
          • 'alert': Use this role when the notification is an alert that requires the user's immediate attention, like for errors or urgent information.
          • 'status': Use this role when the notification is a status message that doesn't require the user's immediate attention, like for success or informational messages.

          <InlineNotification.Icon>

          An icon that indicates the notification's status. Renders a <span> element by default.
          PropType
          icon
          Override the icon displayed in the notification. When this prop is omitted, the icon is determined by the emphasis prop.
          | LucideIcon
          | ReactNode
          render
          Allows you to replace the component's HTML element with a different tag or component. Learn more
          | ReactElement
          | ((
              props: object,
            ) => ReactElement)
          icon
          Type
          | LucideIcon
          | ReactNode
          Description
          Override the icon displayed in the notification. When this prop is omitted, the icon is determined by the emphasis prop.
          render
          Type
          | ReactElement
          | ((
              props: object,
            ) => ReactElement)
          Description
          Allows you to replace the component's HTML element with a different tag or component. Learn more

          <InlineNotification.Label>

          A heading that labels the notification. Renders a <div> element by default.
          PropType
          children
          React children prop.
          ReactNode
          id
          id attribute. If omitted, a unique identifier will be automatically generated for accessibility.
          string
          render
          Allows you to replace the component's HTML element with a different tag or component. Learn more
          | ReactElement
          | ((
              props: object,
            ) => ReactElement)
          children
          Type
          ReactNode
          Description
          React children prop.
          id
          Type
          string
          Description
          id attribute. If omitted, a unique identifier will be automatically generated for accessibility.
          render
          Type
          | ReactElement
          | ((
              props: object,
            ) => ReactElement)
          Description
          Allows you to replace the component's HTML element with a different tag or component. Learn more

          <InlineNotification.Description>

          A paragraph with additional information about the notification. Renders a <div> element by default.
          PropType
          children
          React children prop.
          ReactNode
          id
          id attribute. If omitted, a unique identifier will be automatically generated for accessibility.
          string
          render
          Allows you to replace the component's HTML element with a different tag or component. Learn more
          | ReactElement
          | ((
              props: object,
            ) => ReactElement)
          children
          Type
          ReactNode
          Description
          React children prop.
          id
          Type
          string
          Description
          id attribute. If omitted, a unique identifier will be automatically generated for accessibility.
          render
          Type
          | ReactElement
          | ((
              props: object,
            ) => ReactElement)
          Description
          Allows you to replace the component's HTML element with a different tag or component. Learn more

          <InlineNotification.CloseButton>

          Closes the notification when clicked. Renders a <button> element by default.
          PropType
          children
          React children prop.
          ReactNode
          id
          id attribute. If omitted, a unique identifier will be automatically generated for accessibility.
          string
          render
          Allows you to replace the component's HTML element with a different tag or component. Learn more
          | ReactElement
          | ((
              props: object,
            ) => ReactElement)
          children
          Type
          ReactNode
          Description
          React children prop.
          id
          Type
          string
          Description
          id attribute. If omitted, a unique identifier will be automatically generated for accessibility.
          render
          Type
          | ReactElement
          | ((
              props: object,
            ) => ReactElement)
          Description
          Allows you to replace the component's HTML element with a different tag or component. Learn more

          <InlineNotification.ActionContainer>

          A container for the notification's primary action button. Renders a <div> element by default.
          PropType
          children
          React children prop.
          ReactNode
          render
          Allows you to replace the component's HTML element with a different tag or component. Learn more
          | ReactElement
          | ((
              props: object,
            ) => ReactElement)
          children
          Type
          ReactNode
          Description
          React children prop.
          render
          Type
          | ReactElement
          | ((
              props: object,
            ) => ReactElement)
          Description
          Allows you to replace the component's HTML element with a different tag or component. Learn more
          Last updated on by Ryan Bower
          Inline Icon Button
          Link
          Examples
          Simple
          Composite
          Emphasis (color)
          Dismissable
          Action
          Layout
          Explorer
          API
          <InlineNotificaton>
          Composite API
          <InlineNotification.Root>
          <InlineNotification.Icon>
          <InlineNotification.Label>
          <InlineNotification.Description>
          <InlineNotification.CloseButton>
          <InlineNotification.ActionContainer>
          Copyright © 2026 QUALCOMM incorporated. All rights reserved. This site is built with QUI Docs. Head over to the template repository to start building.