Callout

Headless structured feedback primitive for notes, status messages, and inline alerts.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { Callout } from "@vizejs/ui/callout";

Or copy the source into your project with vize lib pull callout (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Informational note with a decorative icon, a title, a description, and a follow-up link. -->
<script setup lang="ts">
import { Callout } from "@vizejs/ui/callout";
</script>

<template>
  <Callout tone="info">
    <template #icon>i</template>
    <template #title>Node.js 22 required</template>
    <template #description>
      The build tooling now relies on native TypeScript type stripping.
    </template>
    <template #actions>
      <a href="#upgrade-guide">Read the upgrade guide</a>
    </template>
  </Callout>
</template>

API

Callout

Source: src/families/feedback/callout/callout.vue

Props

Slots

Exposed

Behavior

Normative state x input -> outcome table for callout.vue (@vizejs/ui/callout). Every row is proven by the named mounted-DOM, SSR/hydration, renderer, or compile-only type test. A row without a passing test is a contract violation.

Props

Slots

Expose

Data Attributes

ARIA Attributes

CSS Custom Properties

Callout defines no CSS custom properties and ships no stylesheet. Consumers own layout, icon spacing, typography, action placement, color, forced-colors treatment, and responsive composition through ordinary CSS.

Parts