alouette-feedback

name	alouette-feedback
description	Semantic message banners: Message (requires accent + icon) and the presets InfoMessage, ConfirmationMessage, WarningMessage, ErrorMessage. Optional dismiss requires onDismiss and dismissIconAriaLabel together; size is sm/md/lg. Also ConnectionState, a top-pinned network-status banner driven by a state prop, and LinearProgress / CircularProgress determinate progress indicators (progress 0-100, accent, size xs/sm/md/lg). Load when showing inline status, alerts, dismissible notices, connection status, or progress.
type	core
library	alouette
library_version	20.8.0
requires	["alouette-theming"]
sources	["christophehurpeau/alouette:packages/alouette/src/ui/feedback/Message.tsx","christophehurpeau/alouette:packages/alouette/src/ui/feedback/Message.stories.tsx","christophehurpeau/alouette:packages/alouette/src/ui/feedback/ConnectionState.tsx","christophehurpeau/alouette:packages/alouette/src/ui/feedback/ConnectionState.stories.tsx","christophehurpeau/alouette:packages/alouette/src/ui/feedback/LinearProgress.tsx","christophehurpeau/alouette:packages/alouette/src/ui/feedback/CircularProgress.tsx"]

This skill builds on alouette-theming. Read it first for the accent model.

alouette — Feedback messages

Message is an accent-themed banner with an icon and optional dismiss button. Prefer the presets InfoMessage / ConfirmationMessage / WarningMessage / ErrorMessage, which set the accent and icon for you.

Setup

import { InfoMessage } from "alouette";

<InfoMessage>Your changes were saved.</InfoMessage>;

Core Patterns

Presets

import { InfoMessage, ConfirmationMessage, WarningMessage, ErrorMessage } from "alouette";

<InfoMessage>Heads up.</InfoMessage>           {/* accent="info"    */}
<ConfirmationMessage>Saved.</ConfirmationMessage> {/* accent="success" */}
<WarningMessage>Careful.</WarningMessage>       {/* accent="warning" */}
<ErrorMessage>Payment failed.</ErrorMessage>   {/* accent="danger"  */}

Dismissible message

onDismiss and dismissIconAriaLabel must be provided together:

<WarningMessage onDismiss={hide} dismissIconAriaLabel="Dismiss">
  Low disk space.
</WarningMessage>

Custom Message (other accents / icons)

The four presets cover info / success / warning / danger. For a different accent or a custom icon, use the base Message with an explicit accent and icon. size is "sm" | "md" | "lg".

import { Message } from "alouette";
import { XCircleRegularIcon } from "alouette-icons/phosphor-icons/XCircleRegularIcon";

<Message accent="brand" icon={<XCircleRegularIcon />} size="lg">
  Custom banner.
</Message>;

Connection status banner

ConnectionState is a thin banner pinned to the top of its nearest positioned ancestor. It stays hidden while connected and slides down to reveal a pill when connecting or disconnected. It sets its own accent (success when connected, danger otherwise), so no accent prop.

import { ConnectionState } from "alouette";

<ConnectionState state={status}>
  {status === "connected" ? "Connected" : "Reconnecting…"}
</ConnectionState>;

state is "connected" | "connecting" | "disconnected" | null (null renders nothing). children is the required pill label. On reconnection it turns green and holds briefly before sliding out. forceVisible keeps it on-screen even when connected (demos); forceHidden forces it off-screen regardless of state.

The banner is absolutely positioned, so its parent must establish a positioning context and clip the off-screen pill — wrap it in relative overflow-hidden.

Progress indicators

LinearProgress (a thin bar pinned to the top of its positioned ancestor) and CircularProgress (a ring) show a known completion percentage. Both take progress (0-100), accent (defaults brand), size ("xs" | "sm" | "md" | "lg"), and hidden (fades out without unmounting). The fill animates on progress change.

import { LinearProgress, CircularProgress } from "alouette";

<CircularProgress progress={uploaded} accent="brand" size="md" />

<Box className="relative overflow-hidden">
  <LinearProgress progress={uploaded} hidden={uploaded >= 100} />
</Box>

For an unknown-duration wait (spinner), don't hand-roll one — a Button with state="loading" already renders the indeterminate spinner (see alouette-actions). There is no exported standalone indeterminate component.

Common Mistakes

MEDIUM onDismiss without dismissIconAriaLabel

Wrong:

<InfoMessage onDismiss={hide}>Saved</InfoMessage>

Correct:

<InfoMessage onDismiss={hide} dismissIconAriaLabel="Dismiss">
  Saved
</InfoMessage>

Message types onDismiss and dismissIconAriaLabel as a required pair; providing one without the other is a type error and leaves the dismiss button without an accessible label.

Source: packages/alouette/src/ui/feedback/Message.tsx

MEDIUM Rendering the base Message without accent/icon

Wrong:

<Message>Heads up</Message>

Correct:

<WarningMessage>Heads up</WarningMessage>

The base Message requires both accent and icon. For the common cases use a preset, which sets them.

Source: packages/alouette/src/ui/feedback/Message.tsx

MEDIUM Hand-building a colored banner instead of Message

Wrong:

<Box className="bg-yellow-100"><Text>Warning</Text></Box>

Correct:

<WarningMessage>Warning</WarningMessage>

A manual banner loses accent theming, the leading icon, dark-mode support and the dismiss a11y that Message provides.

Source: packages/alouette/src/ui/feedback/Message.tsx

MEDIUM ConnectionState in a non-positioned, non-clipping parent

Wrong:

<Box>
  <ConnectionState state={status}>Reconnecting…</ConnectionState>
</Box>

Correct:

<Box className="relative overflow-hidden">
  <ConnectionState state={status}>Reconnecting…</ConnectionState>
</Box>

The banner is absolute inset-x-0 top-0 and slides in from off-screen. Without a positioned (relative) ancestor it anchors to the wrong element, and without overflow-hidden the hidden/pre-slide pill leaks above the container.

Source: packages/alouette/src/ui/feedback/ConnectionState.tsx

LOW Passing accent to ConnectionState

ConnectionState derives its accent from state (success when connected, danger otherwise) — there is no accent prop. To theme it, change state.

Source: packages/alouette/src/ui/feedback/ConnectionState.tsx

MEDIUM Using LinearProgress/CircularProgress for an unknown-duration wait

Wrong:

<CircularProgress progress={0} /> {/* as a spinner */}

Correct:

<Button text="Save" state="loading" onPress={save} />

LinearProgress / CircularProgress are determinate — they render the progress value you pass. There is no exported indeterminate variant; a pending, no-percentage wait is a Button state="loading" spinner (or ActionButton).

Source: packages/alouette/src/ui/feedback/CircularProgress.tsx; ui/actions/Button.tsx

See also: alouette-animation/SKILL.md — render messages in PresenceList for animated add/remove.