Empty State ​

The Empty State component is used to fill sections or entire pages where there is no content or data to display. Instead of showing a blank area, it provides context about why the space is empty and ideally guides the user on what to do next.

When to use ​

• No data yet (e.g., first-time use or before setup)
• User action returned no results (search, filter)
• Confirmation of a completed process
• System issue or error

When not to use ​

• During content loading — use a spinner or skeleton instead
• For permission or configuration issues — use a dedicated error page
• For static pages where the absence of data is expected

No data ​

Default type. Use when a section has never had data yet.

Multiple lines ​

Default type. Use when a section has never had data yet.

User action result ​

Use when a search or filter returns no results.

Error ​

Use when a system error prevents content from loading.

Success ​

Use to confirm that a process completed successfully.

Centered layout ​

Use align="center" to center all content horizontally — ideal for full-page or card empty states.

With external link ​

Use a q-button with variant="link" and size="sm" inside the default slot to render a tertiary external link below the primary action.

Without icon ​

Custom icon ​

Pass a Bootstrap Icons class string to override the default icon.

Props ​

Slots ​

Accessibility ​

• Use descriptive title and body text so screen readers convey the full context
• Do not rely on color alone to distinguish types — the title should clarify the state
• Buttons and links in the default slot must maintain proper focus order and contrast
• The icon is decorative (aria-hidden="true") — do not use it as the sole indicator