Empty
Empty is used to when a List or Table has no items.
Usage
import { Empty } from 'stwui';
import Empty from 'stwui/empty';
Avatar Dropdown
No Projects
Get started by creating a new project.
<script lang="ts">
import { Empty, Button } from 'stwui';
const lock = "svg-path";
const plus_circle = "svg-path";
</script>
<Empty>
<Empty.Icon slot="icon" data={lock} />
<Empty.Title slot="title">No Projects</Empty.Title>
<Empty.Description slot="description">
Get started by creating a new project.
</Empty.Description>
<Empty.Action slot="action">
<Button type="primary" on:click={() => console.log('clicked new project')}>
<Button.Leading slot="leading" data={plus_circle} />
New Project
</Button>
</Empty.Action>
</Empty>
Empty Slots
icon | <Empty.Icon slot="icon" /> |
title | <Empty.Title slot="title" /> |
description | <Empty.Description slot="description" /> |
action | <Empty.Action slot="action" /> |
default | |
Empty.Icon Props
data | string (IconData) | |
viewBox | string | 0 0 24 24 |
size | string | 24px |
width | string | 24px |
height | string | 24px |
color | string | currentColor |
stroke | string | undefined | |
fill | string | currentColor |
Empty Class Identifiers
stwui-empty |
stwui-empty-title |
stwui-empty-description |
stwui-empty-icon |
stwui-empty-action |