EmptyState
What a page or a table shows when there is nothing yet.
Example
No games yet
Add a game to start taking rounds from this partner.
<script lang="ts">
import { Button, EmptyState } from '@onlywin/ui-svelte';
</script>
<EmptyState
icon="game"
title="No games yet"
description="Add a game to start taking rounds from this partner."
>
{#snippet actions()}
<Button variant="primary" iconStart="plus">Add game</Button>
{/snippet}
</EmptyState>Usage
Do
- Say why it is empty and what to do next.
Don’t
- Do not blame the reader.
Accessibility
- A heading-like title and a description; actions are real buttons.
Props
The same props in both frameworks. In React, class is className, events are camelCase (onClick),
content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use,
and elementRef reaches the DOM element.
| Prop | Type | Default | Description |
|---|---|---|---|
actions | Snippet | — | |
description | string | — | |
icon | TUiIconName | 'box' | |
title | string | — |