Componentes de Contenido
Componentes de visualización para tipografía, indicadores de estado, mensajes, listas y estados de carga — Text, Badge, Banner, List y Spinner.
Los componentes de contenido controlan cómo se presenta la información a los comerciantes dentro de tu plugin.
Text
Componente tipográfico para renderizar texto de cuerpo, encabezados y texto secundario.
import { Text } from "./components/whatalo-ui";
{/* Texto de cuerpo predeterminado */}
<Text>Default body text</Text>
{/* Encabezado de sección */}
<Text variant="heading">Heading text</Text>
{/* Texto secundario / menos prominente */}
<Text variant="subdued">Secondary text</Text>Badge
Indicador de estado en línea. Úsalo para comunicar estados como activo, pendiente o fallido de un vistazo.
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
Bloque de mensaje de ancho completo para notificaciones importantes, advertencias y confirmaciones.
import { Banner } from "./components/whatalo-ui";
{/* Informacional — contexto neutro */}
<Banner status="info" title="Information">
This is an informational message.
</Banner>
{/* Advertencia — requiere atención antes de continuar */}
<Banner status="warning" title="Warning">
Please review before continuing.
</Banner>
{/* Éxito — acción completada */}
<Banner status="success" title="Success">
Changes saved successfully.
</Banner>
{/* Error — algo salió mal */}
<Banner status="error" title="Error">
Something went wrong. Please try again.
</Banner>List
Renderiza una lista ordenada o sin orden usando hijos List.Item.
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
Indicador de carga en línea. Úsalo mientras se obtienen datos o se realiza una operación asíncrona.
import { Spinner } from "./components/whatalo-ui";
<Spinner />Para estados de carga de página completa, combina Spinner con un layout centrado:
import { Spinner, Box } from "./components/whatalo-ui";
{isLoading ? (
<Box>
<Spinner />
</Box>
) : (
<YourContent />
)}