Display Components

Components for presenting data, feedback, and status information.

Text

Typography component with variant and tone support.

import { Text } from "@qumra/manara";

<Text variant="headingLg">Page Title</Text>
<Text variant="headingMd">Section Title</Text>
<Text variant="headingSm">Subsection Title</Text>
<Text variant="bodyMd">Regular body text</Text>
<Text variant="bodySm">Small body text</Text>

// With tones
<Text tone="critical">Error message</Text>
<Text tone="success">Success message</Text>
<Text tone="subdued">Secondary text</Text>

// Alignment
<Text align="center">Centered text</Text>

Props

Prop	Type	Default	Description
variant	"headingLg" | "headingMd" | "headingSm" | "bodyMd" | "bodySm"	"bodyMd"	Typography variant.
tone	"default" | "subdued" | "critical" | "success"	"default"	Color tone.
align	"start" | "center" | "end"	"start"	Text alignment.
children	ReactNode	--	Text content.

---

Badge

A small label for indicating status.

import { Badge } from "@qumra/manara";

<Badge>Default</Badge>
<Badge tone="success">Active</Badge>
<Badge tone="critical">Error</Badge>
<Badge tone="warning">Pending</Badge>
<Badge tone="info">Draft</Badge>

Props

Prop	Type	Default	Description
tone	"default" | "success" | "critical" | "warning" | "info"	"default"	Color tone.
children	ReactNode	--	Badge label.

---

Banner

A prominent message banner for important information, warnings, or errors.

import { Banner } from "@qumra/manara";

<Banner title="Store is live" tone="success">
  Your store is now visible to customers.
</Banner>

<Banner title="Action required" tone="warning">
  Please complete your payment setup before publishing.
</Banner>

<Banner title="Error" tone="critical">
  Failed to sync products. Please try again.
</Banner>

<Banner title="Tip" tone="info">
  You can customize your theme from the Theme Editor.
</Banner>

Props

Prop	Type	Default	Description
title	string	--	Banner title.
tone	"info" | "success" | "warning" | "critical"	"info"	Color tone.
onDismiss	() => void	--	Callback to dismiss the banner.
children	ReactNode	--	Banner body content.

---

Spinner

A loading indicator.

import { Spinner } from "@qumra/manara";

<Spinner />
<Spinner size="large" />

Props

Prop	Type	Default	Description
size	"small" | "large"	"small"	Spinner size.

---

DataTable

Display structured data in a table format.

import { DataTable } from "@qumra/manara";

function OrdersList() {
  return (
    <DataTable
      headings={["Order", "Customer", "Total", "Status"]}
      rows={[
        ["#1001", "Ahmed Ali", "SAR 250.00", "Fulfilled"],
        ["#1002", "Sara Hassan", "SAR 180.00", "Pending"],
        ["#1003", "Omar Khalid", "SAR 320.00", "Fulfilled"],
      ]}
    />
  );
}

Props

Prop	Type	Description
headings	string[]	Column header labels.
rows	(string | ReactNode)[][]	Table row data. Each row is an array of cell values.
footerContent	ReactNode	Optional footer content below the table.

---

Modal

A dialog overlay for focused content or confirmations.

import { Modal, Button, Text } from "@qumra/manara";
import { useState } from "react";

function DeleteConfirmation() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button tone="critical" onClick={() => setOpen(true)}>
        Delete Product
      </Button>

      <Modal
        open={open}
        onClose={() => setOpen(false)}
        title="Delete product?"
        primaryAction={{
          label: "Delete",
          destructive: true,
          onAction: () => {
            // Delete logic
            setOpen(false);
          },
        }}
        secondaryAction={{
          label: "Cancel",
          onAction: () => setOpen(false),
        }}
      >
        <Text>This will permanently delete the product. This action cannot be undone.</Text>
      </Modal>
    </>
  );
}

Props

Prop	Type	Description
open	boolean	Whether the modal is visible.
onClose	() => void	Callback when the modal is closed.
title	string	Modal title.
primaryAction	{ label, onAction, destructive?, loading? }	Primary action button.
secondaryAction	{ label, onAction }	Secondary action button.
children	ReactNode	Modal body content.

---

Toast

A brief notification message. For use outside the App Bridge context (standalone rendering).

import { Toast } from "@qumra/manara";
import { useState } from "react";

function MyPage() {
  const [showToast, setShowToast] = useState(false);

  return (
    <>
      <button onClick={() => setShowToast(true)}>Show Toast</button>
      {showToast && (
        <Toast
          message="Product saved successfully"
          onDismiss={() => setShowToast(false)}
        />
      )}
    </>
  );
}

Props

Prop	Type	Description
message	string	Toast message text.
isError	boolean	Show as error toast.
duration	number	Auto-dismiss duration in ms. Default: 3000.
onDismiss	() => void	Callback when dismissed.

tip

When your app runs inside the Qumra Admin iframe, prefer using useToast() from @qumra/jisr instead. It displays toasts in the admin panel's native toast system.