Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Empty with Link in Description Empty State for Vue

An empty favorites state titled No favorites yet, with a star icon and a Learn more link in the description.

UI library: Ark UI

A star icon, the title No favorites yet, and a description that favorites will show up here. The sentence ends with Learn more about favorites.

Use it when the extra help is optional and does not deserve a button. If marking a favorite is the next step, put that on a Button. In Vue, Ark UI does not mark favorites.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Empty anatomy: root, header, media, title, description, content

Usage

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon"><StarIcon aria-hidden="true" /></EmptyMedia>
    <EmptyTitle>No favorites yet</EmptyTitle>
    <EmptyDescription>
      Items you mark as favorites will appear here.{{ " " }}<a href="#">Learn more about favorites</a>
    </EmptyDescription>
  </EmptyHeader>
</Empty>

FAQ

How is that anchor styled?

EmptyDescription underlines its direct anchors and offsets the underline. On hover the link uses the primary color. The anchor in this file has no class of its own.

What icon is above the title?

StarIcon in EmptyMedia with variant="icon". EmptyTitle is "No favorites yet".

Does the link leave the page?

href="#" stays on this page. Point it at the favorites docs. The anchor has no target.

Where would a button go?

This file has no EmptyContent. The anchor in EmptyDescription is the only action. Add EmptyContent with a Button when you want a button under the text.

Is the inline link reachable from the keyboard?

Yes. It is a real anchor, so Tab focuses it and Enter follows href. "Learn more about favorites" is its accessible name. Hide StarIcon with aria-hidden.

API Reference

Empty

Sets variant="icon". The rest is on the Empty page.

All 22 empty state examples