Status

An element that provides feedback to users about the status of an ongoing process or task.

import {QStatus} from "@qui/react"

Examples

Showcase

Use the kind property to alter the look and feel. There are three variants: dot, icon, and badge.

DotIconBadge

Approved

import {ReactNode} from "react"

import {Check} from "lucide-react"

import {QStatus} from "@qui/react"

export default function Options(): ReactNode {
  return (
    <div className="grid justify-center">
      <div className="grid grid-cols-3 items-center gap-x-8 gap-y-4">
        <span className="text-primary q-font-heading-xs">Dot</span>
        <span className="text-primary q-font-heading-xs">Icon</span>
        <span className="text-primary q-font-heading-xs">Badge</span>

        <QStatus color="positive" label="Approved" />
        <QStatus color="positive" icon={Check} kind="icon" label="Approved" />
        <QStatus color="positive" icon={Check} kind="badge" label="Approved" />
      </div>
    </div>
  )
}

Sizes

Two sizes are available: s and m (default). Use the size property to customize.

SmallMedium

Initializing

import {ReactNode} from "react"

import {Loader} from "lucide-react"

import {QStatus} from "@qui/react"

export default function Size(): ReactNode {
  return (
    <div className="grid justify-center">
      <div className="grid grid-cols-2 items-center gap-x-8 gap-y-5">
        <span className="text-primary q-font-heading-xs">Small</span>
        <span className="text-primary q-font-heading-xs">Medium</span>

        <QStatus color="informative" kind="dot" label="Initializing" size="s" />
        <QStatus color="informative" label="Initializing" />

        <QStatus
          color="informative"
          icon={Loader}
          kind="icon"
          label="Initializing"
          size="s"
        />
        <QStatus
          color="informative"
          icon={Loader}
          kind="icon"
          label="Initializing"
        />

        <QStatus
          color="informative"
          icon={Loader}
          kind="badge"
          label="Initializing"
          size="s"
        />
        <QStatus
          color="informative"
          icon={Loader}
          kind="badge"
          label="Initializing"
        />
      </div>
    </div>
  )
}

Colors

Use the color input to indicate different statuses. For example, positive may indicate approved or success whereas negative indicates error or failure.

DotIconBadge

Approved

Active

Pending

Pause

Rejected

Initalizing

Submitted

NeutralDark

Kiwi

Orange

Blue

Magenta

Fuchsia

States

Use the disabled input to disable the status. A status in a disabled state can show that a status exists, but is not available in that circumstance.

EnabledDisabled

Done

import {ReactNode} from "react"

import {Check} from "lucide-react"

import {QStatus} from "@qui/react"

export default function States(): ReactNode {
  return (
    <div className="grid justify-center">
      <div className="grid grid-cols-2 items-center gap-x-8 gap-y-4">
        <span className="text-primary q-font-heading-xs">Enabled</span>
        <span className="text-primary q-font-heading-xs">Disabled</span>

        <QStatus color="positive" label="Done" />
        <QStatus color="positive" disabled label="Done" />

        <QStatus color="positive" icon={Check} kind="icon" label="Done" />
        <QStatus
          color="positive"
          disabled
          icon={Check}
          kind="icon"
          label="Done"
        />

        <QStatus color="positive" icon={Check} kind="badge" label="Done" />
        <QStatus
          color="positive"
          disabled
          icon={Check}
          kind="badge"
          label="Done"
        />
      </div>
    </div>
  )
}

Name & Description	Option(s)	Default
as The component used for the root node. It can be a React component or element.	\| ElementType \| ComponentType	'div'
className The className property of the Element interface gets and sets the value of the class attribute of the specified element.	string
color Color of the status indicator.	\| 'brand' \| 'red' \| 'orange' \| 'yellow' \| 'kiwi' \| 'green' \| 'teal' \| 'blue' \| 'purple' \| 'fuchsia' \| 'magenta' \| 'neutral' \| 'neutral-dark' \| 'positive' \| 'warning' \| 'negative' \| 'informative'
disabled A status in a disabled state shows that a status exists, but is currently unavailable. This can be used to maintain layout continuity and communicate that a status may become available later.	boolean	false
icon lucide-react icon to display.	LucideIcon
iconSize The size of the icon. Provide one of the preset sizes, or customize with a number or string. If supplied as a number, the value will be applied as px. Otherwise, the string value of the property will apply. If this property is omitted, the size property is used instead.	\| 'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| string \| number
kind The functional variant of the status.	\| 'dot' \| 'icon' \| 'badge'	'dot'
label The status's primary message.	ReactNode
size Size of the component.	's' \| 'm'	'm'
style The style global attribute contains CSS styling declarations to be applied to the element.	CSSProperties
subtle If true, the status will render with the subtle style.	boolean	false

The size of the icon. Provide one of the preset sizes, or customize with a number or string. If supplied as a number, the value will be applied as px. Otherwise, the string value of the property will apply. If this property is omitted, the size property is used instead.

kind

Type