EmptyState

Friendly placeholder for lists and views that have no content yet. The size prop (xs, sm, md, lg, xl) scales icon, padding and text.

Jump to API reference

Import

Vue

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

Default

No bookings yetYour upcoming Umrah trips will appear here.

Vue

<UiEmptyState
  title="No bookings yet"
  description="Your upcoming Umrah trips will appear here."
 />

Custom icon

No hotels foundTry changing the dates or filters.

Vue

<UiEmptyState
  icon="search"
  title="No hotels found"
  description="Try changing the dates or filters."
 />

Sizes

No bookings yetYour upcoming Umrah trips will appear here.

Vue

<UiEmptyState
  size="xs"
  title="No bookings yet"
  description="Your upcoming Umrah trips will appear here."
 />

<UiEmptyState
  size="sm"
  title="No bookings yet"
  description="Your upcoming Umrah trips will appear here."
 />

<UiEmptyState
  size="md"
  title="No bookings yet"
  description="Your upcoming Umrah trips will appear here."
 />

<UiEmptyState
  size="lg"
  title="No bookings yet"
  description="Your upcoming Umrah trips will appear here."
 />

<UiEmptyState
  size="xl"
  title="No bookings yet"
  description="Your upcoming Umrah trips will appear here."
 />

API reference

Centered icon (or image), title and description with optional actions; use when a list, search or section has no content.

Props

PropType and valuesDefaultDescription

titlerequiredstring—Bold heading.

descriptionstring—Supporting text under the title.

iconstring'inbox'Icon name shown in the tile. Ignored when image is set.

imagestring—Image URL shown instead of the icon.

sizexssmmdlgxl'md'Scale of padding, icon tile and text.

Slots

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

defaultActions (buttons) shown under the text.