# Metadata List Item

## Usage

A single labeled metadata value within an `MetadataList`.

```ts
import { MetadataListItem } from '@astryx-vue/core/MetadataList'
```

One label and one value inside a [Metadata List](/en/components/metadata-list). The label goes in the `label` prop and the value in the default slot, so the value can be anything: plain text, a badge, a link, or your own markup. The list decides whether the pair sits side by side or stacked, and whether a label track has a fixed width; the item follows.

`label` is required, because it is the only thing that says what the value means.

## Examples

Common configurations, variations, and states.

### Basic

Labeled key-value rows inside a MetadataList. Values accept any content, from plain text to components like Badge.

```vue
<script setup lang="ts">
import { Badge } from '@astryx-vue/core/Badge'
import { MetadataList, MetadataListItem } from '@astryx-vue/core/MetadataList'
</script>

<template>
  <MetadataList title="Deployment">
    <MetadataListItem label="Environment">
      Production
    </MetadataListItem>
    <MetadataListItem label="Status">
      <Badge label="Healthy" variant="green" />
    </MetadataListItem>
    <MetadataListItem label="Version">
      v2.14.0
    </MetadataListItem>
    <MetadataListItem label="Last deployed">
      June 12, 2026
    </MetadataListItem>
  </MetadataList>
</template>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | — | The name of the field. Required. The default slot is the value. |

## Slots

- default: the value. Any content works: a string, a badge, a link, or markup of your own.
- `icon`: a leading icon drawn before the label.

The pair renders as a `<dt>` and a `<dd>`, or as one stacked block when the list puts labels above values. Either way the label is announced before the value.