Banner

A message about the whole view or a section of it.

The frame above shows the real web components, in the mode this site is in.

The design preview shows it next to every other web component.

When to use it

• Each tone has its own mark shape, so the tone does not depend on color.
• warning and danger interrupt a screen reader. info and success wait their turn.

Example

import { Banner } from "@acme/ui";

<Banner tone="danger" title="Could not save">
  Check your connection and try again.
</Banner>

Options

The web component’s props. The other platforms take the same options under their own naming conventions.

Prop	Type	Notes
tone	"info" | "success" | "warning" | "danger"	Defaults to info.
title	string

Source

Platform	File
Web (React)	packages/ui/src/Banner.tsx
Desktop (GPUI)	crates/acme-ui/src/components.rs
React Native	packages/ui-native/src/Banner.tsx
Compose Multiplatform	kotlin/ui/src/commonMain/kotlin/acme/ui/Banner.kt