StatusPage

Preset full-page states for 404, 401, maintenance and coming soon.

Import

Vue

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

404Page not foundThe page may have moved. Check the address or go back.

Vue

<UiStatusPage kind="404" />

Under maintenanceWe are updating the service. It will be back shortly.

Vue

<UiStatusPage kind="maintenance" />

Coming soonWe are working on it. Leave your email and we will tell you first.

Vue

<UiStatusPage kind="soon" />

Ready-made full-page status screen (404, 401, maintenance, coming soon) with one action button.

PropType and valuesDefaultDescription

kind404401maintenancesoon'404'Preset that sets the code or icon, default title, description and button label.

titlestring—Overrides the preset heading.

descriptionstring—Overrides the preset text.

actionLabelstring—Overrides the button text of the 404, 401 and maintenance presets (default "Back to home").

notifyLabelstring'Notify me'Button text for kind "soon".

emailLabelstring'name@email.com'Placeholder of the email field for kind "soon".

codeNodeVNode—Replaces the big code or icon. Used by PageStatus for its code slot.

messageNodeVNode—Replaces heading and description. Used by PageStatus for its message slot.

actionNodeVNode—Replaces the button or email form. Used by PageStatus for its action slot.

Vue: named slots. React: a prop with the same name; default is children.

defaultExtra content rendered after the button.

Vue: @name. React: onName.

actionCalled when the main button is clicked (not used for kind "soon").

notifyCalled with the typed email string when the Notify button of kind "soon" is clicked.