Components
Empty
An empty state: the page holds its breath. Root centers the column, Visual carries the mark, Title and Description carry the ink, Actions the way out. Any subset composes.
#Basic usage
No letters yet
Letters addressed to the archive will rest here until they are read.
<script setup lang="ts">
import { Button, Empty } from "@bysages/vue";
</script>
<template>
<Empty.Root>
<Empty.Visual>
<svg
width="56"
height="56"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
<path
d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
/>
</svg>
</Empty.Visual>
<Empty.Title>No letters yet</Empty.Title>
<Empty.Description
>Letters addressed to the archive will rest here until they are read.</Empty.Description
>
<Empty.Actions>
<Button variant="solid" tone="ink" size="sm">Write a letter</Button>
<Button variant="ghost" tone="ink" size="sm">Learn more</Button>
</Empty.Actions>
</Empty.Root>
</template>
#Props
#EmptyRoot
A styled part — no props of its own; it takes the anatomy's shared styling.
#EmptyVisual
A styled part — no props of its own; it takes the anatomy's shared styling.
#EmptyTitle
A styled part — no props of its own; it takes the anatomy's shared styling.
#EmptyDescription
A styled part — no props of its own; it takes the anatomy's shared styling.
#EmptyActions
A styled part — no props of its own; it takes the anatomy's shared styling.