@ryanhelsing/ry-ui/docs/components/display.md

Framework-agnostic, Light DOM web components. CSS is the source of truth.

# Display Components

## `<ry-badge>`

| Attribute | Values | Description |
|-----------|--------|-------------|
| `variant` | default \| primary \| success \| warning \| danger | Color |

```html
<ry-badge>Default</ry-badge>
<ry-badge variant="success">Active</ry-badge>
<ry-badge variant="danger">Offline</ry-badge>
```

## `<ry-alert>`

| Attribute | Values | Description |
|-----------|--------|-------------|
| `type` | info \| success \| warning \| danger | Style |
| `title` | string | Heading |

```html
<ry-alert type="info" title="Info">Informational message.</ry-alert>
<ry-alert type="danger" title="Error">Something went wrong.</ry-alert>
```

## `<ry-icon>`

| Attribute | Values | Description |
|-----------|--------|-------------|
| `name` | close, check, chevron-down, chevron-up, chevron-left, chevron-right, copy, sun, moon, info, warning, error, success, search, menu, plus, minus, settings, user, heart, star, trash, edit, external-link, download, upload | Icon |
| `size` | number | Pixels (default: 24) |
| `label` | string | Accessible label |

```html
<ry-icon name="heart" size="16"></ry-icon>
<ry-icon name="settings"></ry-icon>
```

## `<ry-code>`

Use `<ry-code>` with prefix even inside `<ry>` to avoid conflict with native `<code>`.

| Attribute | Values | Description |
|-----------|--------|-------------|
| `language` | js \| css \| html \| json | Highlighting |
| `title` | string | Header |
| `line-numbers` | boolean | Show line numbers |

```html
<ry-code language="js" title="app.js">
const x = 1;
console.log(x);
</ry-code>
```

## Table (native HTML)

Standard `<table>` elements are styled automatically by the ry-ui theme.

```html
<table>
  <thead><tr><th>Name</th><th>Role</th></tr></thead>
  <tbody>
    <tr><td>Alice</td><td>Engineer</td></tr>
    <tr><td>Bob</td><td>Designer</td></tr>
  </tbody>
</table>
```