Banner

Usage

• Use Banner to communicate important, non-modal information about the current page or workflow.
• Use Banner for status changes, warnings, feature announcements, and system-level notices.
• Use Snackbar instead of Banner for non-disruptive confirmations of user actions that auto-dismiss.
• Use inline form error messages instead of Banner for field-level validation.
• Select the variant that matches the semantic meaning of the message. Never choose a variant for its color alone.
• Allow dismissal for informational, non-critical messages. Make the Banner persistent when the issue must be resolved.
• Limit to one primary action. Add a dismiss action only alongside that primary action.
• Enable only one dismissal method at a time: either a close button (onClose without shouldShowDismissButton) or a dismiss action button (shouldShowDismissButton with onClose).

Types

• type="inline" (default) — expands to the full width of its parent container and sits within the page flow. Use for contextual messages tied to surrounding content.
• type="alert" — constrained width with an elevated shadow. Use for page-level notices.
• type="announcement" — full-width, no border radius, center-aligned. Use for application-wide messages such as maintenance notices or feature launches.

Variants

• variant="default" (default) — neutral, general-purpose tips and guidance.
• variant="information" — helpful context and tips the user may be unaware of.
• variant="success" — confirms a positive outcome or completed process.
• variant="caution" — warns the user of an issue that may require attention.
• variant="error" — critical error or issue that must be addressed immediately.
• variant="feature" — promotes newly available features or system updates.

Appearance

• Toggle outlined style (isOutlined) for a subtler treatment: white background with a colored border instead of a filled background.
• Override the default icon per variant with icon set to any Pluma icon name. Set icon={null} to remove the icon entirely.
• Default icons per variant: default = tip, information = help, success = check-circle, caution = warning, error = error, feature = feature-launch.

Behaviors

• Providing onClose without shouldShowDismissButton renders an icon-only close button. Setting shouldShowDismissButton with onClose renders a text dismiss button instead.
• Disable the close button with isCloseButtonDisabled. Disable the dismiss button with isDismissButtonDisabled.
• Pass action to render a primary action button. Set action.isLoading to show a loading indicator. Set action.autoLoading (default true) to show loading automatically when onClick returns a promise.
• Pass action.href to render the action as a link; use action.isExternal for external URLs.
• Actions wrap below the content when the Banner container is narrower than 576px.

Content

• Write titles in sentence case. Keep them to a few strong summary words.
• Use the description prop or Ember description named block to support the title with supplementary detail. Descriptions may be used without a title.
• Do not put all information in the title alone.
• Write action button labels as a single verb or verb phrase that clearly describes the action.
• Match tone to variant: direct and factual for error and caution, more conversational for feature and information.

Implementation Notes

• variant="warning" is deprecated. Use variant="caution" instead.
• React passes description text as the description prop. Ember uses @description or the description named block.
• Ember invocation: <PlumaBanner @variant="information" @description="Description text" @onClose={{this.close}} />.
• React children and Ember default yielded content render directly in the Banner content area. Use them for custom composition, not ordinary description text.
• Use BannerTitle/BannerDescription or PlumaBannerTitle/PlumaBannerDescription when custom composition still needs the standard Banner title or description styles.
• The dismissButtonText prop overrides the default "Dismiss" label and also implicitly enables the dismiss button even without shouldShowDismissButton.
• withResponsiveContainer defaults to true for inline type when the close button is not shown. Override explicitly when needed.
• The component is polymorphic via as (defaults to div).
• action.variant defaults to "subtle".