Empty

Use the Empty component to display an empty state. Padding grows from 24 to 48vp when the component itself is wider than 480vp.

Usage

SEmpty({ bordered: true }) {
  SEmptyHeader() {
    SEmptyMedia({ icon: 'folder', variant: 'icon' })
    SEmptyTitle({ text: 'No Projects Yet' })
    SEmptyDescription({ text: "You haven't created any projects yet. Get started by creating your first project." })
  }
  SEmptyContent() {
    Row({ space: 8 }) {
      SButton({ text: 'Create Project' })
      SButton({ text: 'Import Project', variant: 'outline' })
    }
    SButton({ text: 'Learn More', variant: 'link', sizing: 'sm', iconRight: 'arrow-up-right' })
  }
}

Approximate web preview — the HarmonyOS rendering is the reference.

Avatar media

SEmpty() {
  SEmptyHeader() {
    SEmptyMedia() { SAvatar({ fallback: 'LR', sizing: 48 }) }
    SEmptyTitle({ text: 'User Offline' })
    SEmptyDescription({ text: 'This user is currently offline. You can leave a message.' })
  }
  SEmptyContent() { SButton({ text: 'Leave Message', variant: 'outline', sizing: 'sm' }) }
}

Approximate web preview — the HarmonyOS rendering is the reference.

Filled & compact

filled: bg-muted/50 surface; compact: 16vp padding for small containers.

SEmpty({ filled: true }) {
  SEmptyHeader() {
    SEmptyMedia({ icon: 'bell', variant: 'icon' })
    SEmptyTitle({ text: 'No Notifications' })
    SEmptyDescription({ text: "You're all caught up." })
  }
}
SEmpty({ compact: true, bordered: true }) {
  SEmptyHeader() {
    SEmptyTitle({ text: 'No results' })
    SEmptyDescription({ text: 'Try a different search.' })
  }
}

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SEmpty

shadcn-vue Empty: flex flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 md:p-12 text-center. Padding follows the component's own width (24vp below 480vp, 48vp above); bordered draws the dashed outline.

Variants: bordered (dashed outline), filled (bg-muted/50 surface) and compact (16vp padding, 16vp gaps — for empty states inside cards, lists or popovers).

Prop	Type	Default	Description
bordered	boolean	false
filled	boolean	false	Muted surface (bg-muted/50).
compact	boolean	false	Tight spacing for small containers.
modifier	AttributeModifier<ColumnAttribute>	new SparkNoopModifier<ColumnAttribute>()

Slots: children (trailing closure)

SEmptyHeader

flex max-w-sm flex-col items-center gap-2 text-center.

Slots: children (trailing closure)

SEmptyMedia

mb-2 flex shrink-0 items-center justify-center; the icon variant is bg-muted size-10 rounded-lg with a 24vp icon. Put avatars or images in the slot with the default variant.

Prop	Type	Default	Description
icon	string | undefined	undefined
variant	EmptyMediaVariant EmptyMediaVariant = 'default' | 'icon'	'default'

Slots: children (trailing closure)

SEmptyTitle

text-lg font-medium tracking-tight.

Prop	Type	Default	Description
text	ResourceStr	''

SEmptyDescription

text-muted-foreground text-sm/relaxed.

Prop	Type	Default	Description
text	ResourceStr	''

SEmptyContent

flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm.

Slots: children (trailing closure)