Content Components
Display components for typography, status indicators, messages, lists, and loading states — Text, Badge, Banner, List, and Spinner.
Content components handle how information is presented to merchants inside your plugin.
Text
Typography component for rendering body text, headings, and subdued secondary text.
import { Text } from "./components/whatalo-ui";
{/* Default body text */}
<Text>Default body text</Text>
{/* Section heading */}
<Text variant="heading">Heading text</Text>
{/* Secondary / less prominent text */}
<Text variant="subdued">Secondary text</Text>Badge
Inline status indicator. Use it to communicate states such as active, pending, or failed at a glance.
import { Badge } from "./components/whatalo-ui";
<Badge>Default</Badge>
<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="error">Failed</Badge>Banner
Full-width message block for important notifications, warnings, and confirmations.
import { Banner } from "./components/whatalo-ui";
{/* Informational — neutral context */}
<Banner status="info" title="Information">
This is an informational message.
</Banner>
{/* Warning — requires attention before proceeding */}
<Banner status="warning" title="Warning">
Please review before continuing.
</Banner>
{/* Success — action completed */}
<Banner status="success" title="Success">
Changes saved successfully.
</Banner>
{/* Error — something went wrong */}
<Banner status="error" title="Error">
Something went wrong. Please try again.
</Banner>List
Renders an ordered or unordered list using List.Item children.
import { List } from "./components/whatalo-ui";
<List>
<List.Item>First item</List.Item>
<List.Item>Second item</List.Item>
<List.Item>Third item</List.Item>
</List>Spinner
Inline loading indicator. Use it while data is being fetched or an async operation is in progress.
import { Spinner } from "./components/whatalo-ui";
<Spinner />For full-page loading states, combine Spinner with a centered layout:
import { Spinner, Box } from "./components/whatalo-ui";
{isLoading ? (
<Box>
<Spinner />
</Box>
) : (
<YourContent />
)}Layout Components
Structural components for building plugin pages — Page, PageHeader, Layout, Card, Box, BlockStack, InlineStack, and Divider.
Action Components
Interactive components that trigger user actions — Button, Link, and Accordion — with a full real-world example combining multiple components.