# Interactive Components

Interactive components are the clickable, inline primitives: buttons that fire actions, links that navigate, alerts and badges that convey status. They carry the shared `action` and `interactions` modules (click/hover/entrance behavior) plus `props`, `visibility`, and `responsive`.

```yaml
components:
  - type: button
    label: Save
    action: { type: crud, operation: create, onSuccess: { type: navigate, url: /done } }
  - type: link
    content: Learn more
    props: { href: /docs, target: _blank }
```

## `button`

A clickable button that triggers an `action` and/or `interactions`.

| Property         | Description                                                                                                                             |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| `label`          | Button text label.                                                                                                                      |
| `content`        | Inline content (alternative to `label`; can hold an `icon` child).                                                                      |
| `action`         | Action to run on click — `crud`, `auth`, `navigate`, `automation` — with `onSuccess`/`onError` handlers.                                |
| `interactions`   | Click animation, navigation, scroll, toggle, submit-form, or open-modal. See [Interactivity & Scripts](/en/docs/interactivity-scripts). |
| `props.loading`  | Show a loading spinner inside the button.                                                                                               |
| `props.confirm`  | Click-time confirmation prompt before the action runs.                                                                                  |
| `props.variant`  | Visual style variant (e.g. `primary`, `secondary`, `destructive`).                                                                      |
| `props.disabled` | Disable the button.                                                                                                                     |

## `link`

An anchor element for navigation.

| Property       | Description                                                      |
| -------------- | ---------------------------------------------------------------- |
| `content`      | Link text (supports substitution).                               |
| `props.href`   | URL or route path.                                               |
| `props.target` | Anchor target (e.g. `_blank` for a new tab).                     |
| `props.rel`    | Anchor `rel` attribute (e.g. `noopener noreferrer`).             |
| `children`     | Optional nested content (e.g. an `image` for a clickable image). |

## `alert`

An inline callout block. (Also documented in [Content Components](/en/docs/content-components#alert).)

| Property            | Description                                                        |
| ------------------- | ------------------------------------------------------------------ |
| `content`           | The alert message.                                                 |
| `props.variant`     | `info`, `warning`, `error`, or `success` (each with an auto-icon). |
| `props.dismissible` | Render a close button that hides the alert.                        |

## `badge`

A small status/label chip.

| Property  | Description                                                       |
| --------- | ----------------------------------------------------------------- |
| `content` | Badge label text.                                                 |
| `variant` | Rendering mode (e.g. `status` for a status-indicator dot).        |
| `color`   | Color token for the status dot (`variant: status`).               |
| `label`   | Status label text next to the dot (`variant: status`).            |
| `pulse`   | Enable a pulsing animation on the status dot (`variant: status`). |

## `button-group`

A row of related buttons. (Also documented in [Navigation Components](/en/docs/navigation-components#button-group); combine with `dropdown-menu` for a split-button.)

| Property   | Description                                              |
| ---------- | -------------------------------------------------------- |
| `children` | The grouped `button` components (and optional dropdown). |
| `props`    | HTML attributes (e.g. `className`).                      |

## Related Pages

- [Pages Overview](/en/docs/pages-overview) — actions and response handlers.
- [Interactivity & Scripts](/en/docs/interactivity-scripts) — click/hover/entrance behavior in depth.
- [Form Controls](/en/docs/form-controls) — inputs that buttons submit.
- [Navigation Components](/en/docs/navigation-components) — menus and split-button patterns.