Library
128 books<script setup lang="ts">
import { Bell, Search } from '@lucide/vue'
import { Card, Heading, IconButton, Inline, Space, Tag } from '@hina-ui/vue'
</script>
<template>
<Card class="w-full max-w-lg">
<Inline>
<Heading :level="3" size="md">Library</Heading>
<Tag>128 books</Tag>
<Space />
<IconButton label="Search" variant="ghost">
<Search />
</IconButton>
<IconButton label="Notifications" variant="ghost">
<Bell />
</IconButton>
</Inline>
</Card>
</template>
vue
Usage
import { Space } from '@hina-ui/vue'
ts
Space is an empty element, meaningful only inside a flex container. By default it eats the remaining room and pushes what sits on either side apart. Even spacing between children belongs to the container’s gap; Space is for the one place that needs to stretch or to hold a gap of its own.
<script setup lang="ts">
import { Button, Inline, Space } from '@hina-ui/vue'
</script>
<template>
<Inline class="bg-inset w-full max-w-md rounded-md p-3">
<Button size="sm" variant="soft" tone="neutral">Left</Button>
<Space />
<Button size="sm" variant="soft" tone="neutral">Right</Button>
</Inline>
</template>
vue
Examples
Fixed sizes
Given a size it stops stretching and holds a fixed square instead: 4, 8, 16, 24 and 32 pixels.
xs
sm
md
lg
xl
<script setup lang="ts">
import { Card, Inline, Space, Stack, Text } from '@hina-ui/vue'
const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const
</script>
<template>
<Stack>
<Stack v-for="size in sizes" :key="size" gap="xs">
<Text tone="muted" size="sm">{{ size }}</Text>
<Inline gap="none" class="bg-inset w-fit rounded-md p-2">
<Card class="bg-surface size-8" :padded="false" />
<Space :size="size" />
<Card class="bg-surface size-8" :padded="false" />
</Inline>
</Stack>
</Stack>
</template>
vue
Accessibility
Space carries aria-hidden, so screen readers skip it.
API
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'flex' | 'flex' | A fixed step, or flex to stretch |
class | string | — | Classes appended to the element |