IntegrationCard

Card for a third-party integration with its connection status and an action. The size prop (xs, sm, md, lg, xl) sets the padding and title size.

Jump to API reference

Import

Vue

import { UiIntegrationCard } from '@ziyarago/ui/vue'

Statuses

Stripe

Card payments

Connected

Twilio

SMS notifications

Error

Google Calendar

Sync departures

Not linked

Vue

<UiIntegrationCard name="Stripe" description="Card payments" status="connected" />

<UiIntegrationCard name="Twilio" description="SMS notifications" status="error" />

<UiIntegrationCard
  name="Google Calendar"
  description="Sync departures"
  status="off"
 />

Sizes

Stripe

Card payments

Connected

Stripe

Card payments

Connected

Stripe

Card payments

Connected

Stripe

Card payments

Connected

Stripe

Card payments

Connected

Vue

<UiIntegrationCard
  name="Stripe"
  description="Card payments"
  status="connected"
  size="xs"
 />

<UiIntegrationCard
  name="Stripe"
  description="Card payments"
  status="connected"
  size="sm"
 />

<UiIntegrationCard
  name="Stripe"
  description="Card payments"
  status="connected"
  size="md"
 />

<UiIntegrationCard
  name="Stripe"
  description="Card payments"
  status="connected"
  size="lg"
 />

<UiIntegrationCard
  name="Stripe"
  description="Card payments"
  status="connected"
  size="xl"
 />

API reference

Card for a third-party integration showing its connection status and a connect or manage button.

Props

PropType and valuesDefaultDescription

namerequiredstring—Integration name.

descriptionstring—Short explanation under the name.

statusconnectederroroff'off'Connection state. Sets the badge (Connected, Error, Not linked) and button (Manage, Reconnect, Link).

labels{ connected?: string; error?: string; off?: string; manage?: string; reconnect?: string; link?: string }'{ connected: 'Connected', error: 'Error', off: 'Not linked', manage: 'Manage', reconnect: 'Reconnect', link: 'Link' }'Badge and button texts per status; missing keys keep the English defaults.

sizexssmmdlgxl'md'Card padding and title size.

Events

Vue: @name. React: onName.

toggleCalled when the button is clicked, for connecting, reconnecting or managing.

Notes

Translate badge and button texts with labels.
Unknown status values behave as "off".