UI Components
Action Components
Interactive components that trigger user actions — Button, Link, and Accordion — with a full real-world example combining multiple components.
Action components respond to user input and enable navigation and interaction within your plugin.
Button
Primary interactive trigger. Supports primary and secondary variants plus a disabled state.
import { Button } from "./components/whatalo-ui";
{/* Primary — main action on the page */}
<Button onClick={handleSave}>Save changes</Button>
{/* Secondary — alternative or destructive actions */}
<Button variant="secondary" onClick={handleCancel}>Cancel</Button>
{/* Disabled — action unavailable */}
<Button disabled>Disabled</Button>Link
Navigation link for external URLs or documentation references.
import { Link } from "./components/whatalo-ui";
<Link href="https://docs.example.com" external>
View documentation
</Link>The external prop opens the URL in a new tab and adds the appropriate rel attributes automatically.
Accordion
Collapsible content panel. Use it to hide advanced or optional settings that most merchants will not need.
import { Accordion, BlockStack, Text } from "./components/whatalo-ui";
<Accordion title="Advanced settings">
<BlockStack>
<Text>Hidden content revealed on expand</Text>
</BlockStack>
</Accordion>Real-world example
The following example combines multiple components to build a functional dashboard page:
import {
Page,
PageHeader,
Layout,
Card,
BlockStack,
InlineStack,
Text,
Badge,
Button,
Banner,
Divider,
} from "./components/whatalo-ui";
import { useAppBridge } from "@whatalo/plugin-sdk/bridge";
function DashboardPage() {
const bridge = useAppBridge();
return (
<Page>
<PageHeader title="Dashboard" />
{/* Welcome message with store context */}
<Banner status="info" title="Welcome">
Your plugin is connected to {bridge.storeName}.
</Banner>
<Layout>
{/* Recent orders list */}
<Layout.Section>
<Card>
<BlockStack>
<Text variant="heading">Recent Orders</Text>
<Divider />
<InlineStack>
<Text>Order #1234</Text>
<Badge variant="success">Completed</Badge>
</InlineStack>
<InlineStack>
<Text>Order #1235</Text>
<Badge variant="warning">Pending</Badge>
</InlineStack>
</BlockStack>
</Card>
</Layout.Section>
{/* Quick actions */}
<Layout.Section>
<Card>
<BlockStack>
<Text variant="heading">Quick Actions</Text>
<Button onClick={() => bridge.toast.show("Synced!")}>
Sync Data
</Button>
</BlockStack>
</Card>
</Layout.Section>
</Layout>
</Page>
);
}