# Elements: Feedback and status, further examples

> Plainkit 0.28.0. Generated by scripts/build-skills.mjs from core/dist/elements/api.full.json. Do not edit: change the source and run the generator.

The element sections in `elements-feedback.md` show the first example of each element; these are the rest.

## `pk-alert`

Example: Page-level banner

```html
<pk-alert kind="warning" banner dismissible>Scheduled maintenance tonight at 22:00.<a slot="action" href="#">Details</a></pk-alert>
```

Example: Subtle

```html
<div class="stack"><pk-alert kind="warning" subtle>Debits and credits do not balance for this period.</pk-alert><pk-alert kind="danger" subtle>This line is not linked to a shipment.</pk-alert></div>
```

## `pk-empty-state`

Example: With a link and a button

```html
<pk-empty-state heading="Nothing here" description="This list has no items yet.">
  <span slot="actions"><a href="#back">Back to list</a></span>
  <pk-button slot="actions" variant="primary">Add item</pk-button>
</pk-empty-state>
```

Example: Compact

```html
<pk-empty-state tone="compact" heading="No matches"></pk-empty-state>
```

## `pk-progress`

Example: Auto colour and striped

```html
<pk-progress label="Disk" value="82" level-thresholds="70,90"></pk-progress>
<pk-progress label="Upload" value="45" striped variant="ok"></pk-progress>
```

Example: Inline label

```html
<pk-progress label="Storage" value="40" show-value inline></pk-progress>
```

Example: Indeterminate

```html
<pk-progress label="Working" indeterminate></pk-progress>
```

## `pk-skeleton`

Example: Card placeholder

```html
<pk-skeleton variant="block"></pk-skeleton>
```

## `pk-spinner`

Example: Dots and bar

```html
<pk-spinner variant="dots" label="Working"></pk-spinner>
<pk-spinner variant="bar" label="Uploading"></pk-spinner>
```

Example: Visible label

```html
<pk-spinner show-label label="Loading orders"></pk-spinner>
<pk-spinner show-label variant="dots" size="sm" label="Saving"></pk-spinner>
```