Skip to main content
Browse docs

Marwes documentation

Banner

Inline page-level status messaging component with five semantic intents, optional icon, CTA action slot, and dismiss button.

What this family solves

Inline page-level status messaging component with five semantic intents, optional icon, CTA action slot, and dismiss button.

Use when

  • The UI needs a persistent, page-level message about system state, feature announcements, or required actions.
  • The intent maps to one of the five semantic variants: neutral, info, success, warning, error.
  • The message needs an optional CTA and/or dismiss action.

Avoid when

  • The message is transient and should auto-dismiss (use Toast instead).
  • The message requires user confirmation or a blocking flow (use Dialog instead).
  • The message applies to a specific form field rather than the page (use field-level validation instead).

Public imports

Choose an adapter in the verified examples. The inventory below reflects each framework package exactly.

React — @marwes-ui/react

Components

Banner, ErrorBanner, InfoBanner, SuccessBanner, WarningBanner

Types

BannerProps, ErrorBannerProps, InfoBannerProps, SuccessBannerProps, WarningBannerProps

Enum

BannerVariant

Vue — @marwes-ui/vue

Components

Banner, ErrorBanner, InfoBanner, SuccessBanner, WarningBanner

Types

BannerProps, ErrorBannerProps, InfoBannerProps, SuccessBannerProps, WarningBannerProps

Enum

BannerVariant

Svelte — @marwes-ui/svelte

Components

Banner, ErrorBanner, InfoBanner, SuccessBanner, WarningBanner

Types

BannerProps, ErrorBannerProps, InfoBannerProps, SuccessBannerProps, WarningBannerProps

Enum

BannerVariant

Verified minimal examples

These examples come from the same fixtures verified by the repository checks.

React

import { InfoBanner } from "@marwes-ui/react"

export function Example() {
  return <InfoBanner>A new dashboard version is available. Refresh when you are ready.</InfoBanner>
}

Vue

<script setup lang="ts">
import { InfoBanner } from "@marwes-ui/vue"
</script>

<template>
  <InfoBanner>
    A new dashboard version is available. Refresh when you are ready.
  </InfoBanner>
</template>

Svelte

<script lang="ts">
  import { InfoBanner } from "@marwes-ui/svelte"
</script>

<InfoBanner>
  A new dashboard version is available. Refresh when you are ready.
</InfoBanner>

Accessibility requirements

  • Concise message: Keep the message concise and make any call to action describe its result.
  • Keyboard and screen-reader review: Choose live-region urgency based on the real message; not every warning or error is assertive.
  • Manual review boundary: Whether banner messages are concise enough for screen reader announcement.
  • Manual review 2: Whether error/warning banners actually warrant assertive live-region behavior in context.

Theming

Banner uses Marwes preset CSS and theme variables. Customize it through the theme passed to MarwesProvider; do not add a second component stylesheet. See the theming guide for configuration and token details.

Resources