PageStatus

Full-screen status page. Use kind (404, 401, maintenance, soon) or fill the code, message and action slots.

Jump to API reference

Import

Vue
import { UiPageStatus } from '@ziyarago/ui/vue'

404

404Page not foundThe page may have moved. Check the address or go back.
Vue
<UiPageStatus kind="404" />

Maintenance

Under maintenanceWe are updating the service. It will be back shortly.
Vue
<UiPageStatus kind="maintenance" />

Custom slots

503Service is temporarily unavailableTry again
Vue
<UiPageStatus>
  <template #code>503</template>
  <template #message>Service is temporarily unavailable</template>
  <template #action>Try again</template>
</UiPageStatus>

API reference

Full-page status screen (404, 401, maintenance, coming soon) with one action.

Props

PropType and valuesDefaultDescription
kind404401maintenancesoon'404'Preset screen; selects default texts, the big code or icon, and the button label. Filled into every part whose slot is empty.
titlestring—Overrides the preset heading.
descriptionstring—Overrides the preset description.
onAction() => void—Primary button click.
actionLabelstring—Overrides the preset button text (404, 401, maintenance).
notifyLabelstring'Notify me'Button text for kind "soon".
emailLabelstring'name@email.com'Placeholder of the email field for kind "soon".

Slots

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

codeLarge code or icon; replaces the preset code only.
messageHeading and description; replaces title and description.
actionThe primary button or an email form; replaces the preset action (onAction and actionLabel are then unused).

Events

Vue: @name. React: onName.

actionPreset primary button clicked (not fired when the action slot is filled).
notifyCalled with the typed email when the Notify button of kind "soon" is clicked (not fired when the action slot is filled).

Notes

  • Slots replace only their own part: fill message and the preset code and button remain; kind, title, description, onAction and actionLabel apply to the parts whose slot is empty.
  • kind="soon" shows an email field and a Notify me button; handle onNotify(email) to collect the address.