Live preview

Live

Lifecycle badges

Compact state markers for rows and metadata.

NxStatusBadge

ActivePendingFailed

Persistent alert

Page-level feedback with an explicit severity.

NxAlert

Integration offline

New records will be queued until the connection returns.

Missing references

A recoverable prerequisite with an App-owned creation action.

NxMissingRequiredReferencesAlert

Required reference data is missing

Plant

Loading placeholder

Content-shaped progress while a query is pending.

NxLoadingBlock

Modal confirmation

An action opens this dialog; it is not combined with the other states.

NxModalDialog

Copyable source

Code example

TSX

import { useState } from "react";

import {
    NxAlert,
    NxButton,
    NxLoadingBlock,
    NxMissingRequiredReferencesAlert,
    NxModalDialog,
    NxStatusBadge,
} from "@nexia/sdk/host";

export function StatusAndFeedbackExample() {
    const [dialogOpen, setDialogOpen] = useState(false);

    return (
        <div className="grid gap-6">
            <div className="flex flex-wrap gap-2">
                <NxStatusBadge variant="success">Active</NxStatusBadge>
                <NxStatusBadge variant="warning">Pending</NxStatusBadge>
                <NxStatusBadge variant="error">Failed</NxStatusBadge>
            </div>
            <NxAlert variant="warning" title="Integration offline">
                New records will be queued until the connection returns.
            </NxAlert>
            <NxMissingRequiredReferencesAlert
                title="Required reference data is missing"
                items={[
                    {
                        key: "plant",
                        label: "Plant",
                        createLabel: "Create plant",
                        onCreate: () => undefined,
                    },
                ]}
            />
            <NxLoadingBlock shape="text" lines={3} label="Loading records" />
            <NxButton variant="secondary" onClick={() => setDialogOpen(true)}>
                Open dialog
            </NxButton>
            <NxModalDialog
                open={dialogOpen}
                onClose={() => setDialogOpen(false)}
                title="Archive record"
                description="The record remains available in history."
                footer={
                    <NxButton onClick={() => setDialogOpen(false)}>
                        Confirm
                    </NxButton>
                }
            >
                Review the record before continuing.
            </NxModalDialog>
        </div>
    );
}12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455