Inline Alert

An alert displays a short, important message in a way that attracts the user’s attention without interrupting the user’s task. It is used to provide feedback to the user about an operation or to notify the user about something important.

import {QInlineAlert} from "@qui/react"

Examples

Showcase

The default style variant is neutral, and the dismissable property determines whether the close icon is rendered.

All Major credit cards are acceptable for purchase

import {ReactNode} from "react"

import {Plus, XSquare} from "lucide-react"

import {QButton, QInlineAlert, useNotification} from "@qui/react"

export default function Showcase(): ReactNode {
  const {notify} = useNotification()

  return (
    <div className="grid justify-center">
      <QInlineAlert
        description="All Major credit cards are acceptable for purchase"
        dismissable
        iconButtonProps={{
          onClick: () => {
            notify({
              notification: {
                color: "negative",
                icon: XSquare,
                label: (
                  <span>
                    <span>Dismissed Triggered</span>
                  </span>
                ),
              },
            })
          },
        }}
        label="Note"
      >
        <QButton color="primary" size="s" startIcon={Plus} variant="fill">
          Action
        </QButton>
      </QInlineAlert>
    </div>
  )
}

Colors

There are 5 status colors available, configurable via the color input.

Enter your billing address and payment method to complete your purchase.

import {ReactNode} from "react"

import {QInlineAlert} from "@qui/react"

export default function Status(): ReactNode {
  return (
    <div className="grid justify-center">
      <div className="flex w-[460px] flex-col gap-8">
        <QInlineAlert
          description="Enter your billing address and payment method to complete your purchase."
          label="Payment Options"
        />
        <QInlineAlert
          color="informative"
          description="Enter your billing address and payment method to complete your purchase."
          label="Payment Options"
        />
        <QInlineAlert
          color="positive"
          description="Enter your billing address and payment method to complete your purchase."
          label="Payment Options"
        />
        <QInlineAlert
          color="warning"
          description="Enter your billing address and payment method to complete your purchase."
          label="Payment Options"
        />
        <QInlineAlert
          color="negative"
          description="Enter your billing address and payment method to complete your purchase."
          label="Payment Options"
        />
      </div>
    </div>
  )
}

API

Props

Name & Description	Option(s)	Default
label ^* Label text – the alert's primary message.	ReactNode
as The component used for the root node. It can be a React component or element.	\| ElementType \| ComponentType	'div'
children Content of the Alert.	ReactNode
className The className property of the Element interface gets and sets the value of the class attribute of the specified element.	string
color The style variant of the alert.	\| 'neutral' \| 'informative' \| 'positive' \| 'warning' \| 'negative'	"neutral"
description Optional description text shown below the label.	ReactNode
dismissable Render a close icon that dismisses the alert when clicked.	boolean	false
icon lucide-angular icon. If supplied, this will override the icon from the variant input. Refer to the above snippets for examples.	\| LucideIcon \| ReactNode
iconButtonProps Props passed to the Dismiss Icon when dismissable is `true`.	Partial<QIconButtonProps>	{}
style The style global attribute contains CSS styling declarations to be applied to the element.	CSSProperties
variant ^* Deprecated since v0.5.0, use color instead Related symbols: color	\| 'neutral' \| 'informative' \| 'positive' \| 'warning' \| 'negative'
wrapDescription If true, surround the description text in the Wrap Balancer component.	boolean	false

label

Type

ReactNode

Description

Label text – the alert's primary message.

Type

| ElementType
| ComponentType

Default

'div'

Description

The component used for the root node. It can be a React component or element.

children

Type

ReactNode

Description

Content of the Alert.

className

Type

string

Description

The className property of the Element interface gets and sets the value of the class attribute of the specified element.

color

Type

| 'neutral'
| 'informative'
| 'positive'
| 'warning'
| 'negative'

Default

"neutral"

Description

The style variant of the alert.

description

Type

ReactNode

Description

Optional description text shown below the label.

dismissable

Type

boolean

Default

false

Description

Render a close icon that dismisses the alert when clicked.

icon

Type

| LucideIcon
| ReactNode

Description

lucide-angular icon. If supplied, this will override the icon from the variant input. Refer to the above snippets for examples.

iconButtonProps

Type

Partial<QIconButtonProps>

Default

{}

Description

Props passed to the Dismiss Icon when dismissable is true.

style

Type

CSSProperties

Description

The style global attribute contains CSS styling declarations to be applied to the element.

variant

Type

| 'neutral'
| 'informative'
| 'positive'
| 'warning'
| 'negative'

Description

Deprecated since v0.5.0, use color instead

Related symbols

Related symbols:

wrapDescription

Type

boolean

Default

false

Description

If true, surround the description text in the Wrap Balancer component.

Icon Button

Link