ENSign In
Componentes UI

Componentes de Acción

Componentes interactivos que disparan acciones del usuario — Button, Link y Accordion — con un ejemplo real completo que combina múltiples componentes.

Los componentes de acción responden a la entrada del usuario y habilitan la navegación y la interacción dentro de tu plugin.

Button

Activador interactivo principal. Soporta variantes primaria y secundaria además de un estado deshabilitado.

import { Button } from "./components/whatalo-ui";

{/* Primario — acción principal de la página */}
<Button onClick={handleSave}>Save changes</Button>

{/* Secundario — acciones alternativas o destructivas */}
<Button variant="secondary" onClick={handleCancel}>Cancel</Button>

{/* Deshabilitado — acción no disponible */}
<Button disabled>Disabled</Button>

Enlace de navegación para URLs externas o referencias a documentación.

import { Link } from "./components/whatalo-ui";

<Link href="https://docs.example.com" external>
  View documentation
</Link>

La prop external abre la URL en una nueva pestaña y añade los atributos rel apropiados automáticamente.

Accordion

Panel de contenido plegable. Úsalo para ocultar configuraciones avanzadas u opcionales que la mayoría de los comerciantes no necesitarán.

import { Accordion, BlockStack, Text } from "./components/whatalo-ui";

<Accordion title="Advanced settings">
  <BlockStack>
    <Text>Hidden content revealed on expand</Text>
  </BlockStack>
</Accordion>

Ejemplo real

El siguiente ejemplo combina múltiples componentes para construir una página de dashboard funcional:

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>
  );
}

On this page

Button
Link
Accordion
Ejemplo real