Skip to main content
View as Markdown

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.

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.
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.

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.)

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; combine with dropdown-menu for a split-button.)

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