Feedback

Banner

Page-level dismissible region landmark that surfaces a persistent informational, success, warning, or danger message.

import { Banner } from '@lostgradient/cinder';
feedbacknotice
01

Overview

Reference usage

Full-width announcement strip for page-level alerts, promotions, or system messages.

Usage

svelte 
<script lang="ts">
  import { Banner } from '@lostgradient/cinder';
</script>

<Banner>Your message here.</Banner>

Unreachable preset

When the server or the connection is down, preset="unreachable" renders a warning banner named "Connection problem". Add onRetry for a Retry button and dataUpdatedAt for a stale-data notice with the live age of the data still on screen:

svelte 
<script lang="ts">
  import { Banner } from '@lostgradient/cinder';

  let updatedAt = $state(new Date(Date.now() - 120_000));
</script>

<Banner
  preset="unreachable"
  dismissible={false}
  dataUpdatedAt={updatedAt}
  onRetry={() => (updatedAt = new Date())}
>
  Can't reach the server. Retrying in 8 seconds.
</Banner>

The preset overrides variant with warning. Retry renders in the actions region before any actions snippet. The notice reads "Showing data from" and a relative time such as "2 minutes ago", and it keeps ticking. Use a banner only for the server or the connection; show a failure of one field, row, or step where it happened.

Live preview

Basic banner

Scheduled maintenance is planned for Sunday at 2:00 AM UTC.

02

When to use

Use when
  • Communicating a persistent page-level status the user can dismiss, such as a maintenance window or trial expiry.
  • Reporting that the server or connection is unreachable with the unreachable preset, a Retry action, and the age of the data still shown.
  • Pinning a non-urgent message above page content that should remain readable until acknowledged.
Avoid when
  • Announcing an urgent, time-sensitive message — use alert so assistive tech reads it immediately.
  • Highlighting an inline aside next to related prose — use callout instead.
03

Examples

Basic banner

Informational page-level banner with a dismiss button.

Unreachable preset

The server is down: a Retry action and the age of the data still shown.

Banner variants

All four semantic variant styles — info, success, warning, and danger.

04

Props

Props for banner
Name
Type
Default
Description
variant 'info' | 'success' | 'warning' | 'danger' 'info' Visual + semantic variant. Default 'info'.
dismissible boolean true Whether the banner shows a dismiss (×) button. Default true.
onDismiss () => void Called after the dismiss button is clicked. Use to persist state.
preset 'unreachable' Applies a ready-made configuration. 'unreachable' overrides variant with 'warning' and names the region "Connection problem" unless aria-label or aria-labelledby is passed. Pair it with onRetry and dataUpdatedAt.
onRetry () => void Called when the Retry button is pressed. The button renders in the actions region, before actions, only when this is set.
retryLabel text 'Retry' Label of the Retry button.
dataUpdatedAt text When the data still on screen was last fetched. Adds a stale-data notice that reads "Showing data from" followed by a live relative time such as "2 minutes ago".
staleDataLabel text 'Showing data from' Text that precedes the relative time in the stale-data notice.
children required snippet Banner body content.
actions snippet Optional trailing CTA region (e.g., "Renew now" button).