component
Slots
Capacity as one named chip per slot, open or held, as a labeled list.
Blank colored bars read as empty tags, so each slot of capacity is a chip that says what it is: an open slot is a solid primary badge, a held one an outline badge naming what holds it. title adds a tooltip, and label names the whole list for assistive technology.
- slot 1 · free
- slot 2 · build 4812
- slot 3 · free
<script setup lang="ts">
const linux = [
{ label: 'slot 1 · free', available: true },
{ label: 'slot 2 · build 4812', available: false, title: 'Held since 09:41' },
{ label: 'slot 3 · free', available: true },
]
</script>
<template>
<ZSlots :slots="linux" label="Linux VMs: 2 of 3 free" />
</template>API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| slotsrequired | { label: string; available: boolean; title?: string; }[] | — | In display order. `label` is the chip's text; `available` marks an open slot; `title` is an optional tooltip. |
| label | string | — | What the group is, for assistive tech: "Linux VMs: 1 of 4 free". |
| size | "xs" | "sm" | "md" | "lg" | "xl" | — | — |