Phila Callout Component

A collapsible callout for highlighting important messages and warnings. Clicking the header toggles the body open/closed; the open state can also be driven externally via v-model:open.

Installation

pnpm add @phila/phila-ui-callout @phila/phila-ui-core
# or
npm install @phila/phila-ui-callout @phila/phila-ui-core

Import core styles in your main entry file (e.g., main.js|ts):

import "@phila/phila-ui-core/styles/template-light.css";

Usage

Basic

<script setup lang="ts">
import { Callout } from "@phila/phila-ui-callout";
</script>

<template>
  <Callout title="This is the title" message="Informational message" type="info" />
</template>

With custom content

The default slot replaces message when provided:

<template>
  <Callout title="This is the title" type="info" :open="true">
    Need help applying? Visit the
    <a href="https://www.phila.gov" target="_blank" rel="noopener">City of Philadelphia website</a>
    for the latest information and resources.
  </Callout>
</template>

Controlled

<script setup lang="ts">
import { ref } from "vue";
import { Callout } from "@phila/phila-ui-callout";

const isOpen = ref(false);
</script>

<template>
  <button type="button" @click="isOpen = !isOpen">{{ isOpen ? "Close" : "Open" }}</button>
  <Callout title="Programmatically controlled" message="Driven from outside via v-model:open." v-model:open="isOpen" />
</template>

Types

<Callout title="Info" message="..." type="info" />
<Callout title="Warning" message="..." type="warning" />
<Callout title="Error" message="..." type="error" />
<Callout title="Success" message="..." type="success" />

Each type renders its own icon (info circle, triangle exclamation, circle exclamation, circle check, respectively) from @phila/phila-ui-core/icons.

Props

| Prop | Type | Default | Description | | ----------- | --------------------------------------------- | ----------- | --------------------------------------------------------------- | | title | string | "" | Title text shown in the header (always visible). | | message | string | "" | Body text shown when open. Ignored if the default slot is used. | | type | "info" \| "warning" \| "error" \| "success" | "info" | Callout type — controls color and icon. | | open | boolean | false | Whether the body is expanded (v-model:open). | | className | string | undefined | Additional CSS classes. |

Slots

| Slot | Description | | --------- | -------------------------------------------------------------- | | default | Body content shown when open, replacing message if provided. |

Development

Install Dependencies

pnpm install

Run Demo

pnpm dev

Run lint

pnpm lint

Create Production Build

pnpm build

Publishing to NPM

Follow the release instructions using changesets.

License

MIT