/
1.1k
Sponsor

Status Message

PreviousNext

Inline status message with icon and color

InkOpenTUI
Terminal

Installation

$ pnpm dlx shadcn@latest add @termcn/opentui/status-message

Usage

import { StatusMessage } from "@/components/ui/status-message";
<StatusMessage variant="success">All tests passed.</StatusMessage>

Examples

Variants

Terminal
import { Box } from "@/components/ui/box";
import { StatusMessage } from "@/components/ui/status-message";

export function StatusMessageVariants() {
  return (
    <Box flexDirection="column" gap={1}>
      <StatusMessage variant="success">Build passed.</StatusMessage>
      <StatusMessage variant="error">Connection failed.</StatusMessage>
      <StatusMessage variant="warning">Rate limit at 80%.</StatusMessage>
      <StatusMessage variant="loading">Fetching config...</StatusMessage>
    </Box>
  );
}

API Reference

StatusMessage

PropTypeDefault
variant"success" | "error" | "warning" | "info" | "loading" | "pending""info"
childrenReactNoderequired
iconstring-