# agent-artifact — Examples

## code body

```html
<agent-artifact-ui title="product-card-v2" kind="A2UI" icon="layout">
  <button-ui slot="primary" text="Open in canvas" icon="arrows-out-simple" variant="outline" size="sm"></button-ui>
  <button-ui slot="secondary" text="Copy" icon="copy" variant="ghost" size="sm"></button-ui>
</agent-artifact-ui>
```

## tones

```html
<agent-artifact-ui title="validation-failed" kind="TICKET" icon="warning" tone="warning">
  <button-ui slot="secondary" text="Download" icon="download" variant="ghost" size="sm"></button-ui>
  <div style="font-size: var(--a-ui-sm); color: var(--a-fg-muted); line-height: 1.5;">Validation score 62/100 — the output is missing a price badge and has an unlabeled button. Retrying would help.</div>
</agent-artifact-ui>
```

## Usage

```html
<agent-artifact-ui title="product-card" kind="A2UI" icon="layout">
  <button-ui slot="primary" text="Open in canvas" icon="arrows-out-simple"></button-ui>
  <button-ui slot="secondary" text="Copy" icon="copy"></button-ui>
</agent-artifact-ui>
```
