Banner

Overview

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

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

<Banner>Your message here.</Banner>

Live preview

Use when

Communicating a persistent page-level status the user can dismiss, such as a maintenance window or trial expiry.
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.

Informational page-level banner with a dismiss button.

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

Props for banner
Name	Type	Default	Required	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.
`children`	`snippet`		req	Banner body content.
`actions`	`snippet`			Optional trailing CTA region (e.g., "Renew now" button).